单击显示和隐藏div

Question

通过单击链接，我想显示一个最初隐藏的div .box 。 但是，如果在.box可见时再次单击链接，那么我想将其隐藏。

我可以显示以下代码，但是当再次单击链接时如何隐藏它？

<a href="#" class="link">Click</a>
<div class="box" style="display: none">box</div>

$('.link').click(function(e){    
    $('.box').fadeIn('slow');
});

http://jsfiddle.net/ntfhfsft/

Answer 1

$('.link').click(function(e){    
    $('.box').toggle();
});

FIDDLE供参考

文件资料

Answer 2

您需要使用fadeToggle()在fadeIn和fadeOut之间切换。 添加event.preventDefault()以防止对click事件进行默认操作。

更新：您可以使用stop()清除动画队列

 $('.link').click(function(e) { e.preventDefault() $('.box').stop() .fadeToggle('slow'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#" class="link">Click</a> <div class="box" style="display: none">box</div> 

Answer 3

的HTML：

<a href="#" class="link">Click</a>
<div class="box" style="display: none">box</div>

您可以使用切换方法：

  $('.link').click(function(e){
        $('.box').toggle('slow');
    });

这是演示