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); 
    }); 

私はオーバー行く。ここ

は、メニュー構造です。サブメニューを表示すると、2番目のdivが表示されますが、離れるとdivが消えて再び表示されます。サブメニューを終了すると、途中でメニューが表示されます。

希望の効果に達するために私の退出時にプライマリ部門に当たるのを避ける方法はありますか？

おかげ

ローラン

Answer 1

あなたが直接<ul>内<a>を持つことはできません。 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>