1

我有这个简单的标题菜单，但是当我单击时#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>
4

3 回答 3

3

事件冒泡，所以当你点击 a 时li，你也隐含地点击了document（因为document它是 的祖先li）。您可以通过以下方式防止这种情况e.stopPropagation()：

$('#nav li').click(function(e) {
  e.stopPropagation();
于 2012-11-26T19:15:36.950 回答
2

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

提到的 pimvdb 的问题（调用stopPropagation）是可能有其他处理程序依赖于您的点击一直到文档。这就是fancybox正在发生的事情

我已经修改了您的 HTML 以使其更有意义并且更易于阅读。您之前的 HTML 是在所有lis 上设置处理程序，但它应该只对第一个进行处理。我添加了一些类名以使您的 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');
         }
    });
});​
于 2012-11-26T20:05:17.397 回答
1

这是另一种方式，不绑定任何文件：

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

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

参见 基于 Juan Mendes 答案的DEMO

于 2012-11-26T20:18:28.697 回答