Question

我有一个由标签组成的菜单。

我希望此菜单在外部点击时关闭，并在您点击其内部并打开标签时保持活动状态。

我找到了解决方案here

看起来像这样：

$('html').click(function() {
    //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

但它在我的情况下不起作用，因为在应用它之后，标签变得不可点击。

这是我的标记：

<button>Open menu</button>
<div class="menu">Tabbable content here</div>

Answer 1

您需要执行以下操作才能完成此任务：

<强> HTML

<button id= "open">Open menu</button>
<div class="menu">Tabbable content here</div>

<强>的jQuery

$(".menu").hide();
$('html').click(function() {
$(".menu").hide();
});

$('#open').click(function(event){
event.stopPropagation();
$(".menu").show();
});

JsFIDDLE HERE

Answer 2

检查html点击事件，点击不是来自菜单或按钮，如果没有，请将其关闭，类似于：

DEMO - 只有在点击了meny或button以外的任何内容时才隐藏

这里的好处是，不是让点击事件绑定到stopPropagation的多个元素，而是只有一个位置来保持逻辑。

此外，任何依赖于点击气泡的功能都会保持不变，因为您只需要检查需要区分它的聚焦范围内的点击来源。

DEMO的代码：

$('html').click(function(event) {
  var $menu = $(".menu");
  var $button = $("#open");

  if(event.target !== $menu[0] && event.target !== $button[0]){
    // add code here to close your menu...
    $(".menu").hide(); // or similar code
  }
});

$('#open').click(function(event) {
  $(".menu").show();
});

在大多数只有1次点击的情况下，stopPropagation非常棒，但在您需要更多控制权的情况下，我认为可能是更好的选择。

当然，将点击事件与stopPropagation绑定到所有其他元素也是可行的。

外部点击关闭菜单。棘手的例子

2 个答案: