Question

发生了什么：

用户点击按钮
菜单打开（<li> s display = block）
关闭菜单功能已附加到<body>
立即触发关闭菜单功能并关闭菜单

我正在附加一个功能来关闭菜单（隐藏li s）到body（3），以便在菜单打开后，用户可以通过点击任意位置关闭它在屏幕上关闭它。

问题是附加到body的功能会立即在按钮点击功能中触发，因此菜单会在用户看到之前打开和关闭。

我正在使用jQuery 1.7的.on（）函数来绑定事件。

有人知道一个简单的解决方案吗？ 'bindAfterEvent'或类似的东西。

代码：

$(document).ready(function() {
    $('#page-content div.center-block div:nth-child(1) ul li:nth-child(1)').on('click', openSubnav);
});

openSubnav = function(e) {
    // Shows all li tags and attaches close function to the body
    e.preventDefault();
    $('#page-content div.center-block div:nth-child(1) ul li').show();
    $('body').on('click', closeSubnav);
};

closeSubnav = function() {
    // Hides all li tags except the first (used to open)
    $('#page-content div.center-block div:nth-child(1) ul li').hide();
    $('#page-content div.center-block div:nth-child(1) ul li:nth-child(1)').show();
};

Answer 1

这样的东西？（更新）

$('button').off('click').on('click', functione(e) {
   // stop propagation to assure the body click won't be triggered
   e.stopPropagation();
   $('div').show();
   $('body').off('click').on('click', function(e) {
      // return false if the element clicked is the button that shows the menu
      if($(e.target).is('button')) return false;
      $('div').hide();
      $('body').off('click');
   });
});

Answer 2

打开菜单时，在点击事件中使用jquery的stopPropagation()。看到这个小提琴：http://jsfiddle.net/zoeexe5q/

通过按钮单击将点击事件附加到正文，而不立即触发它

2 个答案: