使用 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。

导航{

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);  

}

导航 .select {

边距：0；填充：0；列表样式：无；空白：nowrap； }

导航里{

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 .select a b {

显示：块；填充：0 30 像素 0 像素 15 像素； }

nav .select li:hover a {

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 a b {

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

}

导航.sub {

显示：无；边距：0；填充：0 0 0 0；列表样式：无；背景颜色：#006； }

nav .sub li { 背景色：#006;}

nav .select li:hover .sub {

高度：30px；显示：块；位置：绝对；向左飘浮;宽度：904px；顶部：28px；左：0；文本对齐：居中；背景颜色：#006；背景：url（../images/sub-nav2.jpg）； z指数：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;边框顶部：0px；行高：30px；高度：30px；背景：网址（../images/sub-nav3.jpg）； z 指数：990； }

Answer 1

可以在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
  });
});