Question

我的网页上有一个“选项”按钮。当用户单击该按钮时，会出现一个小子菜单。

当我点击该菜单外部时，它会关闭。到现在为止还挺好。

我的问题是当我再次点击选项按钮时（当菜单可见时），菜单保持打开状态。它应该关闭。

以下是管理“点击外部”功能的代码

$j(document).mouseup(function(e) {
   var container = $j('.playlist-menu');

   if (container.has(e.target).length === 0) {
      container.hide();
   }
});

按钮上的事件

$j('#options').click(function() {   
    $j('.playlist-menu').toggle();
});

HTML结构：

<button id="options" class="float-left" title="Options" type="button">
<div class="playlist-menu display-none">
   <ul>
       ...
   </ul>
</div>

我不明白为什么当我在选项按钮上再次点击时它没有关闭，该按钮的e.target不是'播放列表菜单'所以为什么菜单没有关闭？

由于

Answer 1

这是因为当您单击按钮时，菜单被绑定到文档的事件处理程序隐藏，但是，选项按钮上的事件处理程序也会被触发。这会触发菜单切换它的状态，使其可见。

要解决此问题，请检查绑定到文档的事件处理程序（如果事件目标不是选项按钮，而不是菜单中的元素）。

所以，像这样

$(document).mouseup(function(e) {
   var container = $('.playlist-menu');
   $target = $(e.target); 
   if (container.has( $target ).length === 0 && !$target.is('#options') ) {
       container.hide();
   }
});

希望这是有道理的。

当用户点击按钮或其外部时隐藏DIV - 几乎就在那里

1 个答案: