延遲下拉菜單的隱藏
[英]Delaying a drop down menu from hiding
問題描述
謝謝大家，我的菜單現在可以使用了，因為子菜單顯示的時間足夠長，用戶可以將鼠標移到鏈接上。 不幸的是，這並不完全正確。 即使用戶將鼠標放在子菜單上，該子菜單也會關閉。 我已經在下面添加了HTML代碼以及經過修改的js文件代碼。 我認為問題出在$（'。myMenu> li'）。bind（'mouseout'，closeSubMenu）; 線。 可能的另一種選擇是在調用openSubMenu函數后至少有8秒左右的時間在子菜單隱藏之前具有超時延遲。 這對我來說是可以接受的解決方案。
<!-- HTML menu code below -->
<ul class="myMenu">
<li class="menuHeader"><a href="#">Employees <img src="images/arrowdown.gif" alt="Employee Links" width="11" height="8" border="0"/></a>
<ul class="subMenu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul></li>
</ul>
<!-- js file code below -->
$(document).ready(function() {
$('.myMenu > li').bind('mouseover', openSubMenu);
$('.myMenu > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').css('visibility', 'visible');
};
function closeSubMenu() {
var ul = $(this).find('ul');
setTimeout(function(){
ul.css('visibility', 'hidden');}, 10000);
};
});
3 個解決方案
解決方案1
1 2012-08-27 02:36:54
您的setTimeout回調沒有執行任何操作，應將代碼放入回調函數中。 setTimeout不同於sleep 。
function closeSubMenu() {
var ul = $(this).find('ul');
setTimeout(function(){
ul.css('visibility', 'hidden');
}, 2000);
};
解決方案2
0 2012-08-27 02:42:12
嘗試類似的事情。 如果切換到隱藏狀態，則隱藏之前會延遲3秒鍾。 如果要顯示切換，則$（'＃toggle-item'）將清除隊列並顯示該項目，
function toggle(show){
if (show) {
$('#toggle-item').stop().clearQueue().show();
} else {
$('#toggle-item').delay(3000);
}
}
解決方案3
0 2012-08-27 02:53:29
setTimeout命令的工作方式與此setTimeout(the function to execute, delay in milliseconds)
因此，這是您需要做的：
setTimeout($(this).find('ul').css('visibility', 'hidden'),3000);
請注意，從$(this)到'hidden')是實際命令。 如果這不起作用，請嘗試以下方法：
//place this in your <head> section
function closeDropDownFunction() {
$(this).find('ul').css('visibility', 'hidden');
}
//then place this wherever the timeout needs to be
setTimeout(closeDropDownFunction(), 3000);
下拉菜單隱藏菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.