0

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

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

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

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

$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 不是“播放列表菜单”，那么为什么菜单没有关闭？

谢谢

4

1 回答 1

3

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

为了克服这个问题，如果事件目标不是选项按钮也不是菜单中的元素，请检查绑定到文档的事件处理程序。

所以，像这样

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

希望这是有道理的。

于 2012-11-26T16:39:30.460 回答