使用 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 .select {

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

nav li {

float:left;

}

nav .select a {

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 {

显示：块；内边距：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 ab {

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

}

nav .sub {

显示：无;保证金：0；填充：0 0 0 0；列表样式：无；背景颜色：#006； }

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

nav .select li:hover .sub {

height: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 {

color: #000;背景：#fff；顶部边框：0px；行高：30px；高度：30px；背景：url(../images/sub-nav3.jpg); z 指数：990； }

Answer 1

可以在此处找到一个（有点）很好的例子。

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