遅延（JS）のドロップダウンメニューの作成方法は？

Question

ドロップダウンメニューがあります。サブメニューが遅れることがあります。

これは私が現時点でどのように実装したかの例[1]です。

setTimeoutを使用してボタンがマウスオーバーしたら、メニューが表示されるまでカウントダウンを開始し、ボタンからカーソルが削除されたら、clearTimeoutを使用してタイムアウトをキャンセルします。

なぜ動作しないのか理解できません。

Transitiondisplay: noneで動作しないので、これはオプションではありません。

問題なく動作するように修正するにはどうすればよいですか？

Answer 1

CSS transitionはdisplay: block;またはdisplay: none;とは機能しません。あなたはjQueryの.delay()を使用することができます。

$(function() { 
 
    $("ul").hide(); 
 
    $("a").mouseover(function() { 
 
    $("ul").delay(1000).fadeIn(); 
 
    }); 
 
});

a {display: inline-block; text-decoration: none; padding: 5px; color: #000; border: 1px solid #ccc; border-radius: 3px; line-height: 1;} 
 
.btn {margin-bottom: -1px;} 
 
ul, li {margin: 0; padding: 0; list-style: none; border: 1px solid #ccc;} 
 
ul {padding: 5px; background-color: #fff; width: 100px;} 
 
ul li a {display: block; border-width: 0; border-top-width: 1px; border-radius: 0} 
 
ul li:first-child a {border-top: 0;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<a href="#" class="btn">Menu</a> 
 
<ul> 
 
    <li><a href="">Item 1</a></li> 
 
    <li><a href="">Item 2</a></li> 
 
    <li><a href="">Item 3</a></li> 
 
</ul>