懸停滑動菜單問題

Question

這是我的問題的鏈接。 請幫助我解決滑動菜單保持穩定狀態，直到可以選擇菜單中的子菜單鏈接。下面

HTML

<div id="menu"> 
<ul id="tabs"> 
<li id="tabsli"><a href="#">Home</a></li> 
<li id="tabsli"><a href="#tab1">Tab1</a></li> 

<div id="tab1" class="subtabs"> 
    <ul> 
    <li id="tabsli1"><a href="slideshow.html">slideshow</a></li> 
    <li id="tabsli1"><a href="#">Tab1-2</a></li> 
    <li id="tabsli1"><a href="#">Tab1-3</a></li> 
    </ul> 
</div> 

<li id="tabsli"><a href="#tab2">Tab2</a></li> 

<div id="tab2" class="subtabs"> 
    <ul> 
    <li id="tabsli1"><a href="RegForm.html">Register</a></li> 
    <li id="tabsli1"><a href="Pagination.html">Simple Pagination</a></li> 
    <li id="tabsli1"><a href="#">Tab2-3</a></li> 
    </ul> 
</div> 
<li id="tabsli"><a href="#"> Contact Us</a></li> 
</ul> 


</div> 

jQuery的

我曾嘗試代碼

$(document).ready(function(){ 
    menu(); 
    function menu(){ 
     $('.subtabs').hide(); 
    $("#tabs a").hover(function(){ 
     $(this.hash).slideToggle("slow"); 
    }); 
}; 
}); 

JsFiddle

Answer 1

你不能在<ul>標籤的中間添加<div>標籤。那是壞的html語法。你想要做的是將子菜單<div>添加到正在用於打開子菜單的<li>中。應該在<li>標記上使用懸停方法，以隱藏並顯示<div>。