HTML「Dropdown Menu」 - 切換點擊

我在HTML中創建了一個「下拉菜單」，當你點擊一個元素時出現。如果你點擊它會應用「選擇」的li一類，這將導致元件上出現子菜單：HTML「Dropdown Menu」 - 切換點擊

我有代碼，現在將顯示/隱藏菜單點擊時菜單項。如果選擇不同的菜單就會從中刪除選定的類別和觸發它被點擊的一個：

$("#menu").on("click", "li.dropdown", function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    $(this).siblings(".dropdown").removeClass("selected"); 
    $(this).toggleClass("selected"); 
});

的問題是，我有這個權利現在，當我點擊內的孩子的辦法子菜單，它將切換菜單並關閉它。

我還想在單擊文檔中的任何其他位置時隱藏菜單。這可以通過實現：

$(document).on("click", function(event) { 
    $("#menu .dropdown").removeClass("selected"); 
});

1）如何啓用無需隱藏菜單點擊下拉部分時，該切換功能？

2）如果在菜單/子菜單本身以外的其他地方單擊時隱藏菜單？

來源

2012-12-17 Dismissile

你不是已經回答＃2你自己嗎？ – j08691

用戶不必點擊關閉 - 他們應該能夠簡單地將鼠標移出菜單。 –

儘管@Diodeus可以在自動關閉菜單之前使用短暫的超時時間 - 如果您有幾個子菜單，當您不小心滑出邊緣並且整個事情立即關閉時，它真的很煩人。 – nnnnnn

您似乎以可接受的方式回答＃2。要做到1：

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

jsFiddle example

來源

2012-12-17 22:20:16 j08691

Meeehhhh不如我的優雅:-P – Neal

這就是我想要的。我想我已經是90％了，因爲我對文檔的其他部分做了相同的處理，但由於某種原因，並沒有爲子菜單應用相同的思維過程:) – Dismissile

HTML「Dropdown Menu」 - 切換點擊

回答

相關問題