本文介绍了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继续切换菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-03 04:11