0

我有一个由选项卡组成的菜单。

我希望此菜单在外部单击时关闭，并在您单击其中并打开选项卡时保持活动状态。

我在这里找到了解决方案

它看起来像这样：

$('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>
4

2 回答 2

0

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

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 在这里

于 2013-02-06T11:54:11.123 回答
0

检查 html click 事件，点击不是来自菜单或按钮，如果不是，则关闭它，类似于：

演示- 仅在单击菜单或按钮以外的任何内容时隐藏

这样做的好处是，您无需将点击事件绑定到多个元素，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所有其他元素绑定也可以正常工作。

于 2013-02-06T11:54:55.013 回答