Dropdown jQueryの親のホバー遅延

Question

私はドロップダウンメニューを作成しようとしています。そのためこのコードは次のとおりです。

<script type="text/javascript"> 
 
    $(document).ready(function(e) { 
 
    $('.has-sub').hover(function() { 
 
     $(this).toggleClass("tap", 350, "easeOutSine"); 
 
    }); 
 
    }); 
 
</script> 
 

 
<li class="has-sub"> 
 
    <a href="briefing.html"> 
 
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span> 
 
    </a> 
 
    <ul> 
 
    <li> 
 
     <a href="flightlog.html"> 
 
     <img src="images/share.png" id="menu-icons">Flight Log</a> 
 
    </li> 
 
    <li> 
 
     <a href="loadsheet.html"> 
 
     <img src="images/weight.png" id="menu-icons">Loadsheet</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="images/compass.png" id="menu-icons">Alternates</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a> 
 
    </li> 
 
    </ul> 
 
</li>

私は何をしようとすると、ドロップダウンの親のためのホバー遅延を作成することです。ドロップダウンメニューが表示されるように2秒間「フライトブリーフィング」を表示する必要があります。

私は、さまざまな質問で提供されたいくつかの他のソリューションを試しましたが、機能しませんでした。

Answer 1

あなたの.hover（）関数は少し間違っています - あなたはmouseenterとmouseleave関数が必要です - 私はsetTimeout（）を使って2秒の遅延を与えることでタイマーを2000ミリ秒（2秒）要素beforehte効果にマウスを置くのに実際には時間がかかる）、mouseoutをulを直接隠すようにしてください。私は.has-sub ulがdisplayを持っていることを知っていることを示しています：none、そして.tapクラスdisplay：blockを追加します。あなたが行くここ

$(document).ready(function(){ 
 
    $('.has-sub').hover(
 
     function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)}, 
 
     function(){$(this).removeClass("tap"); clearTimeout()} 
 
    ); 
 
    });

.has-sub ul{display:none} 
 
.tap ul{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="has-sub"> 
 
    <a href="briefing.html"> 
 
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span> 
 
    </a> 
 
    <ul> 
 
    <li> 
 
     <a href="flightlog.html"> 
 
     <img src="images/share.png" id="menu-icons">Flight Log</a> 
 
    </li> 
 
    <li> 
 
     <a href="loadsheet.html"> 
 
     <img src="images/weight.png" id="menu-icons">Loadsheet</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="images/compass.png" id="menu-icons">Alternates</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a> 
 
    </li> 
 
    </ul> 
 
</li>

Answer 2

。他に必要なものがあれば教えてください。あなたが最良の一つとして、私の答えをマークしていなかったのはなぜ

$('.link').mouseenter(function(){ 
 
    int = setTimeout(() => { 
 
    $('.dropdown').fadeIn(); 
 
    }, 2000); 
 
}).mouseleave(function(){ 
 
    clearTimeout(int); 
 
});

.dropdown { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<li class="has-sub"> 
 
    <a href="briefing.html" class='link'> 
 
    <img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span> 
 
    </a> 
 
    <ul class='dropdown'> 
 
    <li> 
 
     <a href="flightlog.html"> 
 
     <img src="images/share.png" id="menu-icons">Flight Log</a> 
 
    </li> 
 
    <li> 
 
     <a href="loadsheet.html"> 
 
     <img src="images/weight.png" id="menu-icons">Loadsheet</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="images/compass.png" id="menu-icons">Alternates</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a> 
 
    </li> 
 
    </ul> 
 
</li>