jQuery響應式多頁菜單鼠標懸停/離開交互

由於項目的響應性，因此具有非常規html標記的級別菜單。這意味着我不能像創建嵌套菜單時一樣使用嵌套的ul和li。jQuery響應式多頁菜單鼠標懸停/離開交互

我已經創建了一個小提琴，在mouseover加載正確的下一個菜單，但在mouseleave菜單保持不變。

我想要的菜單，像懸停相互作用而被隱藏一旦光標離開對應的子級

http://jsfiddle.net/umbriel/pqbvkuoy/

$('.level2').hide(); 
$('.level3').hide(); 


$('.level1').find('ul .active').mouseover(function(){ 
    $('.level2').show(); 
}); 

$('.level2').find('ul .active').mouseover(function(){ 
    $('.level3').show(); 
});

謝謝

來源

2014-10-31 Sebastian Graz

http://api.jquery.com/mouseenter/ – 2014-10-31 14:16:31

補充說，只是讓你可以看看它更多的，也許之前我提出我自己的答案你有更好的答案 – 2014-10-31 14:17:40

你的菜單設計應該是嵌套的。由於響應並不意味着它不能嵌套。意味着你需要以不同的方式改變CSS。 – epascarello 2014-10-31 14:23:44

你可以使用hover()事件和toggle()。試試這個：

$('.level1').find('ul .active').hover(function(){ 
     $('.level2').toggle(); 
});

入住這DemoFiddle

來源

2014-10-31 14:19:06 DaniP

問題是，這不會與OPs設計一起工作。不可能點擊二級菜單。 – epascarello 2014-10-31 14:24:39

Yep @epascarello你是對的...可以通過更多的代碼在Jquery上解決，或者只需要在CSS上添加一行代碼http://jsfiddle.net/pqbvkuoy/3/ – DaniP 2014-10-31 14:28:13

@SebastianGraz如果你想讓你的設計使用這一個。但不要使用直切換。使用'toggleClass（）'並使用CSS完成所有的事情。這樣你就避免了'！important'這是最好的方式去做這件事。如果你使用'！important'，你不會努力獲得最好的解決方案。 – 2014-10-31 14:36:31

jQuery響應式多頁菜單鼠標懸停/離開交互

回答

相關問題