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>