如何使延遲（JS）的下拉菜單？

-7

有一個下拉菜單，你需要做一個延遲子菜單下降。如何使延遲（JS）的下拉菜單？

這是我如何實施的[示例] [1]。

一旦鼠標結束使用setTimeout啓動倒數計時器，直到出現菜單，如果光標從按鈕上移除，則使用clearTimeout取消超時。

不明白爲什麼它不起作用。

Transition不適用於display: none，所以這不是一個選項。

如何修復以使其正常工作？

來源

2017-06-13 dmitriy

請在問題你的代碼。小提琴應該是補充的，而不是必須理解這個問題。 – Utkanos

首先，請閱讀[問]。相關代碼直接屬於您的問題。 //你的子菜單通過CSS，通過規則'.menu ul li：hover> .submenu'變得可見，如果你想使用JavaScript引入延遲，你首先必須刪除該規則，然後在JS中完成整個事情。 – CBroe

你的jsFiddle沒用，因爲你沒有包含'jQuery'。你知道你的源代碼需要**'jQuery庫**'嗎？如果沒有，那麼我建議你在獲取免費源代碼之前先閱讀並嘗試將其粘貼到自己的東西中。 – NewToJS

CSS transition s將不會與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>

來源

2017-06-13 10:08:33

如何使延遲（JS）的下拉菜單？

回答

相關問題