点击显示并隐藏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

您需要使用fadeToggle()以淡入淡出和切换。添加event.preventDefault()以防止点击事件的默认操作。

更新：您可以使用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 2

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

FIDDLE参考

DOCUMENTATION

Answer 3

HTML：

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

你可以用它来ggle方法：

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

这里是Demo