Question

我有这个简单的标题菜单，但是当我点击#nav li时，#nav ul会继续切换。如果点击文档上的其他位置，我想隐藏#nav ul。

   $(document).ready(function() {
      $('#nav li').click(function() {
      $('ul', this).show('fast');
    });

     $(document).click(function() {
        $('ul','#nav li' ).hide('fast');

    });

  });

这是Simpe HTML。 http://jsfiddle.net/pMaL5/

 <div id="nav">

    <li style="margin-top: -15">
        <a class="modalbox"  href="#header2_li" style="font-size: 40px;">ADD</a>
        <ul>
        <li>
            <a class="modalbox" href="#inlineheadersend">Settings</a>
        </li>
        <li>
            <a>News</a>
        </li>
    </ul>
    </li>

    <li>
        <span href="#">Messages</span>
        <ul>
            <li>
                <a class="modalbox" href="#inlineheadersend">compose new</a>
            </li>
            <li>
                <a>show messages</a>
            </li>
        </ul>

        <div class="clear"></div>
    </li>


</div>

Answer 1

事件冒出来，所以当您点击li时，您也会隐含地点击document（因为document是li的祖先）。您可以使用e.stopPropagation()

来阻止这种情况

$('#nav li').click(function(e) {
  e.stopPropagation();

Answer 2

问题是pimvdb提到的。每次点击都会传播到文档（除非您调用stopPropagation()）。

pimvdb提到的问题（调用stopPropagation）是可能有其他处理程序依赖于您的点击一直到文档。这与fancybox正是如此？

我修改了HTML以使其更有意义并且更易于阅读。您之前的HTML是在所有li上设置处理程序，但它应该只对第一个进行处理。我添加了一些类名，使你的HTML更具语义性，依赖标签名称是不好的做法

<div id="nav">
  <ul>
    <li class="add"><a class="modalbox">ADD</a></li>     
    <li>
        <span href="#">Messages</span>
        <ul class="showhide">
            <li><a class="modalbox" href="#inlineheadersend">compose new</a></li>
            <li><a>show messages</a></li>
        </ul>
        <div class="clear"></div>
    </li>
   </ul>
</div>

http://jsfiddle.net/8s6wJ/1/

以下脚本执行上述HTML所需的操作，而不会阻止点击传播。

$(document).ready(function() {
    $('#nav').click(function() {
        $('.showhide').show('fast');
    });

     $(document).click(function(e) {
         // Only hide if actual element clicked 
         // was not a child of #nav
         if ($(e.target).closest('#nav').length == 0) {
             $('.showhide').hide('fast');
         }
    });
});

Answer 3

这是另一种方式，没有将任何内容绑定到文档：

$(document).ready(function() {
    $('#nav').click(function() {
        $('.showhide').show('fast').focus();
    });

    $('.showhide').focusout(function(e) {
         $(this).hide('fast');
    }).focus();
});

根据Juan Mendes的回答

查看DEMO

document.click继续切换菜单

3 个答案: