子菜單消失

Question

CSS：

ul.topnav { 
list-style: none; 
margin: 0px; 
padding: 0px; 
display: inline; 
} 

ul.topnav li { 
position: relative; 
display: inline; 
margin: 0px; 
padding: 0px; 
} 

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} 

ul.topnav li ul.subnav { 
list-style: none; 
position: absolute; 
display: none; 
background-color: black; 
margin: 0px; 
padding: 0px; 
border: 1px solid gray; 
} 

ul.topnav li ul.subnav li { 
width: 170px; 
margin: 0px; 
padding: 0px; 
} 

HTML：

<ul class="topnav"> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Tutorials</a> 
     <ul class="subnav"> 
      <li><a href="#">Sub Nav Link</a></li> 
      <li><a href="#">Sub Nav Link</a></li> 
     </ul> 
    </li> 
</ul> 

使用Javascript/JQuery的：

$(document).ready(function() { 
     $("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*) 
     $("ul.topnav li span").click(function() { //When trigger is clicked... 

     //Following events are applied to the subnav itself (moving subnav up and down) 
     $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click 
     $(this).parent().hover(function() {}, function(){ 
       $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
     }); 

     //Following events are applied to the trigger (Hover events for the trigger) 
     }).hover(function() { 
      $(this).addClass("subhover"); //On hover over, add class "subhover" 
     }, function(){ //On Hover Out 
      $(this).removeClass("subhover"); //On hover out, remove class "subhover" 
     }); 
}); 

的菜單將顯示，當點擊，但是當你想選擇一個子項目時，菜單消失。

Answer 1

會發生什麼事是你不再徘徊所以

$(this).parent().hover(function() {}, function(){ 
       $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
     }); 

這個被調用。你需要做的是在你認爲合適的任何尺寸的導航背後放置一個無形的div，然後使用.mouseout()來撥打.slideup()。