使用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。选择一个b { 显示：块;填充：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 a b { 
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像素;身高：30px;背景：网址（../图像/子nav3.jpg）; z-index：990; }     
2019-08-16 2 条评论
分享

没有找到相关结果

    已邀请:

    刷骸码

    在这里可以找到一个（sorta）这样的好例子 
    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
  });
});
        
    2019-08-16 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.032967090606689