點擊顯示並隱藏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