Question

我正在尝试实现以下行为：

单击带有DivA ID的“选项”链接时，DivB应显示淡入效果。如果我再次单击“选项”链接以及在页面中除DivB内部之外的任何其他位置点击，则DivB应该再次消失。

这是我的HTML代码：

<a href="..." id="DivA">Option</a>
<div id="DivB">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

这是我的JQuery代码。这是错误的，如果DivB被隐藏，我点击文档中的任何地方，DivB就会出现。

<script type="text/javascript">
    $(document).click(function () {
        $("#DivB").fadeToggle("200");
    });
    $("#DivA").click(function () {
        e.stopPropagation();
        return false;       
    });
</script>

哪里出错？谢谢你的帮助。

Answer 1

Live Demo

$(function() {
  $(document).on("click",function (e) {
     if (e.target.id=="DivA") {
       $("#DivB").fadeToggle(200);
       e.stopPropagation();
       return false;
     }
     else if ($("#DivB").is(":visible")) {
       $("#DivB").fadeOut(200);
     }
  });
});

Answer 2

<script>
    $(document).on('click', function( evt ) {
        evt.stopPropagation();
        if ( evt.target.id == 'DivA' || $('#DivB').is(':visible')) 
             $('#DivB').fadeToggle();
    });
</script>

小提琴：http://jsfiddle.net/nR6e3/1/

Answer 3

$(document).on("click",function () {
   if ($("#DivB").is(":visible")){
       $("#DivB").fadeOut(200);
   }
});

$("#DivA").click(function (e) { // you need place 'e'(for event handling)
    $("#DivB").fadeIn(200);
    e.stopPropagation();
    return false;       
});

JQuery，如何让div在点击任何地方时消失？

3 个答案: