单击,切换,Jquery

时间:2011-03-25 15:58:04

标签: jquery click toggle

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的任何地方,菜单将返回显示为无。

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

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

3 个答案:

答案 0 :(得分:2)

哇,柜台为什么?

为什么不呢:

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

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

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

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

答案 1 :(得分:1)

执行此操作的一种方法是在文档上注册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()

答案 2 :(得分:0)

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

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

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