随地点击关闭菜单

时间:2011-07-20 13:27:55

标签: javascript jquery menu

你们可以看到,我有一个下拉菜单。

我有很多列,每个列都有一个打开菜单的选项。

$(".optionCont").live("click", function(){
    $(".dropMenuCont").slideUp();
    if ($(this).next().css("display") == "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

那么,当我点击页面的任何位置时,如何进行菜单slideUp?

像文档一样点击?

我访问了其他主题,但我不知道为什么,这不起作用。也许我是以不同的方式做到的。

我接受菜单编码中的任何提示。

演示:Jsfiddle

5 个答案:

答案 0 :(得分:8)

在回调中注册一次性处理程序 以确保下一次点击关闭菜单:

$(".optionCont").live("click", function(ev){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    ev.stopPropagation();

    $(document).one('click', function() {
             $(".dropMenuCont").slideUp();

    });
});

请参阅http://jsfiddle.net/alnitak/GcxMs/

答案 1 :(得分:1)

$(".optionCont").click(function(e){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    e.preventDefault();
    e.stopPropagation();
    return false;
});

$(document).click(function() {
     $(".dropMenuCont").slideUp();
});

Here is the JSFiddle

答案 2 :(得分:1)

尝试类似:

$(document).click(function(e) {
   if ($(e.target) != myEl)
       myEl.slideUp();
})

替代方案:working example

来源:

$(".optionCont").live("click", function(e) {
    var that = this;
    $(document).click(function(e) {
        console.log(e.target);
        console.log(that);
        if (e.target != that) {
            e.stopPropagation();
            e.preventDefault();
            $(".dropMenuCont").slideUp();
        }
    });
    if ($(this).next().css("display") === "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
    e.stopPropagation();
    e.preventDefault();
});

答案 3 :(得分:0)

$('body').bind("click",function (){
    $(".dropMenuCont").slideUp();
});
$('.dropMenuCont').click(function(event){
    event.stopPropagation();
});

我认为检查某些内容是否隐藏更好的方法是在动画回调中切换菜单上的类,然后使用hasClass进行检查。

答案 4 :(得分:0)

只需将点击绑定到<body>

即可
$('body').click(function() {
  $(".dropMenuCont").slideUp();
});

$('.dropMenuCont').click(function(e){
  e.stopPropagation();
});