Question

var flip = 0;  
     $("#aabbcc").click(function () {  
         $("#navigation_menu_1").toggle( flip++ % 2 == 0 );  
});

<div id="aabbcc"></div> 
  <div id="navigation_menu_1">
<ul>
  <a href="#"><li>Navigation Item</li></a>
</ul>

我正在使用这个小脚本进行“点击菜单” 我想要完成的是活动菜单，其中一个按钮被调用：如果鼠标离开其中一个按钮调用的div区域，则为none。

所以基本上我会点击菜单按钮，出现div，但如果我点击div的任何地方，菜单将返回显示为无。

这看起来很简单，但我已经待了几个小时。

提前感谢任何建议或建议。

Answer 1

哇，柜台为什么？

为什么不呢：

 $("#aabbcc").click(function () {
     $("#navigation_menu_1").show();
});

此外，您根本不会处理div之外的点击。所以它（应该）永远不会消失。这可能有点慢（需要改进），但它应该可以再次隐藏它：

$(div).not("#aabbcc").click(function () {
     $("#navigation_menu_1").hide();
});

再一次，选择每个div并绑定一个点击事件是一个坏主意，我认为可能会出现“绑定到任何不在此对象上的点击”的行，但是你得到了图片。

Answer 2

执行此操作的一种方法是在文档上注册click()。如果event.target.id不等于某个约束，则只需隐藏导航。

$(document).click(function(event) {
    var a = $(event.target).andSelf().parents("#navigation_menu_1");
    if (a.length == 0 && $("#navigation_menu_1").is(":visible")) {
        $("#navigation_menu_1").toggle();
    }
});

jsfiddle上的代码示例。

此外，不需要flip变量，您只需直接致电.toggle()。

Answer 3

您是否希望在div外部的点击或mouseover / mouseout事件中显示：none？如果你想在隐藏div之外的鼠标点击时隐藏，请使用：

jQuery(document).one("click", function() { jQuery("#navigation_menu_1").fadeOut(); });

示例：http://jsfiddle.net/ckaufman/mU89N/

单击，切换，Jquery

3 个答案: