JS下拉菜單不關閉？

所以我在這裏找到了這個小提琴：http://jsfiddle.net/8qPvp/4/ 我以爲我只是爲了個人教育的目的而使用它。我真的很新的JS，我注意到，打開的父母不會重新點擊，就像它打開。這怎麼解決？JS下拉菜單不關閉？

$(document).ready(function() { 
    $("li").click(function() { 
     $('li > ul').hide(); 
     $(this).children("ul").toggle(); 
    }); 
});

來源

2013-10-24 user2907241

也許這？只改變一下風格：P http://jsfiddle.net/MatthewDavis/4syjv/ –

幾乎完美的，但我不能關閉菜單：/你可以讓它像你點擊任何其他地方，它關閉？ – user2907241

我對它：P，當它的工作，我會把它作爲一個awnser –

這個怎麼樣：

$("li").click(function() { 
    $('li > ul').hide(); 
    $(this).children("ul").toggle(); 
}); 

$(document).click(function() 
{ 
    $('li > ul:visible').hide(); 
}) 

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

所以默認情況下我做，只要點擊任何地方，在文檔中，你看到的菜單將被隱藏。但是，當您打開一個新菜單時（不會發生這種情況）（將會直接顯示並隱藏）。所以當我想打開一個新的菜單時，我會發現一個異常，並且我將取消文檔單擊事件。
我使用event.stopPropagation()來取消事件。

jsFiddle

來源

2013-10-24 09:16:59 nkmol

謝謝，這個作品！但是現在我該如何添加一個css轉換？懸停時，我只是使#div {height：10px; transition：height 1s;} #div：hover {height：100px;}對不對？或沒有？那麼無論如何，我不知道如何將javascript添加到javascript：/ – user2907241

好吧，這是一個完整的其他主題。很難一起使用這個jQuery和css，因爲在css中沒有任何onClick函數。當菜單列表可見時，您必須添加一個新類。但是我認爲這會變得太「開箱即用」，我會建議先嚐試一些simpels。 – nkmol

它看起來非常愚蠢，只有一個菜單剛剛彈出，因爲頁面上的其他任何內容都可以通過轉換順利進行動畫。也許我只是做一個懸停菜單。 – user2907241

$(document).ready(function() { 
    $("li").click(function() { 
     $('li > ul').hide(); 
     $(this).children("ul").toggle(); 
    }).mouseleave(function(){ 
     $(this).children("ul").hide(); 
    }); 
});

檢查這個小提琴http://jsfiddle.net/Aveendra/8qPvp/18/

來源

2013-10-24 08:51:25

mouseleave使菜單混淆。 –

現在它可以隨機懸停，並在瀏覽到下一個菜單時保持菜單打開狀態。 – user2907241

抱歉，我錯誤地使用了mouseleave中的toggle（）。它應該是hide（）。 –

JS下拉菜單不關閉？

回答

相關問題