document.click继续切换菜单

问题描述

我有这个简单的标题菜单，但是当我点击 #nav li 时， #nav ul 不断切换。我想隐藏 #nav ul ，如果在文档的其他地方点击了。

I have this simple header menu but when i click #nav li ,the #nav ul keeps toggling.I want to hide #nav ul if clicked anwhere else on the document.

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

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

    });

  });

这里是Simpe HTML。

Here is the 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>

推荐答案

事件冒泡，因此当您点击 li ，你也隐式地点击文档（因为 document 是一个 li 的祖先）。您可以通过 e.stopPropagation（）来防止：
$ b

Events bubble up, so when you click a li, you implicitly also click the document (because document is a ancestor of the li). You can prevent that with e.stopPropagation():

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

这篇关于document.click继续切换菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！