将隐藏参数添加到脚本

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'); 
     }); 
    });