jQuery - 下拉菜單顯示/隱藏

Question

我試圖找出一種乾淨的方式來顯示下拉菜單，並在離開時使其消失。這聽起來像是小菜一碟，但它不是因爲ul/li層次結構。

這是菜單結構：

<li class="has-submenu navigation-link"> 
<a href="<link>">TEST</a> 
<ul class="submenu menu vertical" data-submenu=""> 
<a href="<link>">TEST</a> 
</ul> 
</li> 

默認情況下，.submenu設置爲顯示：無

我用下面的jQuery：

$(".has-submenu").hover(function() 
    { 
     $(this).children('ul').slideDown(); 
    }); 
$(".submenu").mouseout(function() 
    { 
     $(this).delay(800).fadeOut(100); 
    }); 

當我走了過來。有子菜單，第二個div顯示出來，但是當我離開時，div會消失，然後再次出現，因爲離開.submenu時，我也一路點擊.has-menu。

有沒有辦法避免在我的出路達到預期效果的主要股利？

感謝

洛朗

Answer 1

你不能有<a>直接<ul>內。由於您正在使用hover事件，因此您可以在CSS中實現此目的。如果你有更多的UL和LI，這個代碼也是可擴展的，而如果你想要淡入淡出效果，你也可以使用transition。

ul li ul {display: none;} 
 
ul li:hover ul {display: block;}

<ul> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

動畫

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    text-decoration: none; 
 
} 
 
ul li { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 
ul li ul { 
 
    position: absolute; 
 
    left: 0; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.5s linear; 
 
    -moz-transition: all 0.5s linear; 
 
    -ms-transition: all 0.5s linear; 
 
    -o-transition: all 0.5s linear; 
 
    transition: all 0.5s linear; 
 
} 
 
ul li:hover { 
 
    background: #ccf; 
 
} 
 
ul li:hover ul { 
 
    opacity: 1; 
 
}

<ul> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>