使用JavaScript添加setTimeout UL菜单
我正在尝试在下拉菜单中添加延迟。 我希望菜单在光标离开它后约两秒钟可见。 这是我的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 .select {
余量：0; 填充：0; 列表样式：无; 空白：NOWRAP; }
nav li {
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 a {
height: 30px;
line-height:30px;
cursor:pointer;
color:#fff;
background-color: #006;
background-image: url(../images/sub-nav2.jpg);
}
nav .select ab {
显示：块; padding：0 30px 0px 15px; }
nav .select li：悬停一个{
height: 30px;
line-height:30px;
cursor:pointer;
color:#fff;
background-color: #006;
background-image: url(../images/sub-nav2.jpg);
z-index: 2000;
}
nav .select li：hover 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 li {background-color：＃006;}
nav .select li：hover .sub {
高度：30PX; 显示：块; 位置：绝对的; 向左飘浮; 宽度：904px; 顶部：28px; 左：0; 文本对齐：中心; background-color：＃006; 背景：网址（../图像/子nav2.jpg）; z-index：980; }
nav .select li：hover .sub li a {
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 .select li：hover .sub li a：hover {
颜色：＃000; 背景：#FFF; border-top：0px; 行高：30像素; height：30px; 背景：网址（../图像/子nav3.jpg）; z-index：990; }
这里可以找到一个很好的例子
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
});
});