使用JavaScript添加setTimeout UL菜單

Question

我試圖給下拉菜單添加一個延遲。我希望菜單在光標離開它後約兩秒鐘可見。這是我的HTML的一個例子。

<ul class="select"> 
    <li><a><b>Home</b></a></li> 
    <li><a><b>Accommodation</b></a> 
    <ul class="sub"> 
     <li><a>Hotels</a></li> 
     <li><a>Luxury Villas</a></li> 
     <li><a>Apartments</a></li> 
     <li><a>Hostels</a></li> 
    </ul> 
    </li> 
</ul> 

這是我使用的CSS。

NAV {

height:30px; 
width: 904px; 
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:13px; 
z-index:500; 
background-color: #666; 
background: url(../images/sub-nav_04.jpg); 

}

NAV。選擇{

餘量：0;填充：0;列表樣式：無;空白：NOWRAP; }

NAV李{

float:left; 

}

NAV。選擇一個{

display:block; 
height:30px; 
float:left; 
text-decoration:none; 
line-height:30px; 
white-space:nowrap; 
color:#333; 
border-right-width: 1px; 
border-right-style: dotted; 
border-right-color: #666; 
padding-right: 0; 
padding-left: 15px; 
margin-top: 0px; 
margin-bottom: 0px; 

}

NAV .select1一個{

height: 30px; 
line-height:30px; 
cursor:pointer; 
color:#fff; 
background-color: #006; 
background-image: url(../images/sub-nav2.jpg); 

}

NAV。選擇一個B {

顯示：塊; padding：0 30px 0px 15px; }

NAV。選擇李：懸停一個{

height: 30px; 
line-height:30px; 
cursor:pointer; 
color:#fff; 
background-color: #006; 
background-image: url(../images/sub-nav2.jpg); 
z-index: 2000; 

}

NAV。選擇李：懸停AB {

display:block; 
cursor:pointer; 
padding-top: 0; 
padding-right: 30px; 
padding-bottom: 0px; 
padding-left: 15px; 
z-index: 2000; 

}

NAV .SUB {

顯示：無;餘量：0; padding：0 0 0 0; list-style：none; background-color：＃006; }

NAV .SUB利{背景色：＃006;}

NAV。選擇李：懸停.SUB {

高度：30像素;顯示：塊;位置：絕對的;向左飄浮;寬度：904px;頂部：28px;左：0;文本對齊：中心; background-color：＃006;背景：網址（../圖像/子nav2.jpg）; z-index：980; }

NAV。選擇李：懸停.SUB立一個{

display:block; 
height:30px; 
line-height:30px; 
float:left; 
white-space:nowrap; 
color: #FFF; 
font-size:12px; 
font-weight: bold; 
border-top-width: 0px; 
border-right-width: 1px; 
border-bottom-width: 0px; 
border-left-width: 0px; 
border-right-style: dotted; 
border-right-color: #666; 
padding-right: 16px; 
padding-left: 16px; 
margin-right: 0; 
margin-bottom: 0; 
margin-left: 7; 
z-index: 1000; 

}

NAV。選擇李：懸停。sub li a：hover {

color：＃000;背景：#FFF; border-top：0px;行高：30像素; height：30px;背景：網址（../圖像/子nav3.jpg）; z-index：990; }

Answer 1

A（八九不離十）就是很好的例子可以發現here

var hideDelayTimer = null; 
$('.select').mouseenter(function() { 
    $(this).children('.sub').slideDown().mousenter(function() { 
    if (hideDelayTimer) clearTimeout(hideDelayTimer); 
    }).mouseleave(function() { 
    if (hideDelayTimer) clearTimeout(hideDelayTimer); 
    hideDelayTimer = setTimeout(function() { 
     hideDelayTimer = null; 
     $(this).slideUp(); 
    }, 2 * 1000); 
    }); 
}); 

如果你需要一些幫助定位，你可以做這樣的事情：

$('.sub').each(function() { 
    var parent = $(this).parent(); 
    var parentOffset = parent.offset(); 
    $(this).css({ 
    left: parentOffset.left + parent.width(), 
    top: parentOffset.top 
    }); 
});