將隱藏參數添加到腳本

Question

您好我目前有以下腳本，我試圖添加一個顯示和隱藏功能，而不是隻有一個隱藏和顯示它。基本上是 「點擊我」 表明它和按鈕隱藏它，小提琴例如

http://jsfiddle.net/9M99G/

$(document).ready(function() { 
    var content = $('.below').hide(); 
    $('.toggleBtn').on('click', function() { 
     $(this).next('.below').slideToggle(); 
     return false; 
    }); 
}); 

Answer 1

只是做與.below格相同，slideToggle它$(this)：

$('.below').on('click', function(){ 
    $(this).slideToggle(); 
}); 

demo jsFiddle

查看更多abo UT slideToggle()

Answer 2

使用slideToggle

$('.below').on('click', function(){ 
$(this).slideToggle(); 
}); 

這將切換顯示狀態;如果隱藏它會顯示，如果顯示它會被隱藏

Answer 3

如果你只想按鈕的隱藏功能，這些代碼會做

$(document).ready(function() { 
    var content = $('.below').hide(); 
    $('.toggleBtn').on('click', function() { 
     $(this).next('.below').slideToggle(); 
     return false; 
    }); 
    $('.below').on('click', function(){ 
     $(this).slideToggle(); 
    }); 
}); 

Demo fiddle：http://jsfiddle.net/9M99G/4/

或者，如果你想隱藏Click Me當正在顯示下面的代碼隱藏按鈕正是如此

$(document).ready(function() { 
    var content = $('.below').hide(); 
    $('.toggleBtn').on('click', function() { 
     $(this).hide(); 
     $('.below').show(); 
     return false; 
    }); 
    $('.below').on('click', function() { 
     $(this).hide(); 
     $('.toggleBtn').show(); 
     return false; 
    }); 

}); 

Demo fiddle :http://jsfiddle.net/9M99G/6/

Answer 4

DEMO

試試這個，使用了slideDown和效果基本show

$(document).ready(function() { 
     $('.below').hide(); 
     $('.toggleBtn').click(function() { 
      $(this).next('.below').slideDown('slow'); 
      return false; 
     }); 
     $('.below button').click(function() { 
      $(".below").slideUp('slow'); 
     }); 
    });