Question

点击时显示或隐藏 div

2015-09-10

342

javascript jquery html

通过单击链接，我想显示最初隐藏的 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 供参考

文档

guradio

2015-09-10

Answer 3

html:

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

您可以使用切换方法：

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

这里是演示