用任何點擊關閉菜單

正如你們可以看到的，我有一個下拉菜單。用任何點擊關閉菜單

我有很多列，每個都有一個選項來打開菜單。

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

那麼，我怎樣才能做菜單slideUp，當我點擊頁面的任何地方？

像文件一樣點擊？

我訪問了其他主題，但我不知道爲什麼，這是行不通的。也許我正在以不同的方式去做。

我接受菜單編碼中的任何提示。

演示：Jsfiddle

來源

2011-07-20 Ricardo Binns

這是一個重複的問題。看看這裏的答案： http://stackoverflow.com/questions/5104309/close-on-click-anywhere –

@Adam：然後投了一票。 –

嗯，猜我沒有看到任何「關閉」投票選項......以前沒有這樣做，我錯過了明顯的東西？ –

註冊一個一次性處理內回調，以確保下一次單擊關閉菜單：

$(".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/

來源

2011-07-20 13:35:05 Alnitak

yeap，現在正在工作。錯過了回調。謝謝 –

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

我想檢查一個更好的主意，如果事情是隱藏的是切換你的菜單上的類動畫的回調，然後用hasClass檢查。

來源

2011-07-20 13:31:33 avall

$(".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

來源

2011-07-20 13:33:27

試着這麼做：

$(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(); 
});

來源

2011-07-20 13:33:27

剛將點擊綁定到<body>

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

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

來源

2011-07-20 13:35:50

用任何點擊關閉菜單

回答

相關問題