Question

我创建了以下导航（可以在我的目标和问题描述下面找到源。）

：定位

我希望最终得到的结果是：只要您悬停导航点，就会显示子导航。当您更改导航点时，所有其他主导航（包括子导航）点应该直接隐藏，但是当您离开完整导航时，在所有内容隐藏之前应该有几秒钟的延迟。

问题

当我浏览第一个点“Home”时，子导航点“News”出现了。一旦我离开“家”，就会有250毫秒的延迟，直到“新闻”消失，到目前为止一直很好。

现在，如果我尝试将鼠标移动到子导航点“新闻”，当我离开第一个导航点“Home”时，它会隐藏在第二个导航点。

HTML

<div id="menu">
      <ul id="dropdown">
            <li>
                  <a href="#">Home</a>
                  <ul>
                        <li><a href="#">News</a></li>
                  </ul>
            </li>
            <li>
                  <a href="#">Navlevel 1</a>
                  <ul>
                        <li><a href="#">Navlevel 2</a></li>
                        <li>
                              <a href="#">Navlevel 2</a>
                              <ul>
                                    <li><a href="#">Navlevel 3</a></li>
                                    <li><a href="#">Navlevel 3</a></li>
                                    <li><a href="#">Navlevel 3</a></li>
                              </ul>
                        </li>
                  </ul>
            </li>
      </ul>
</div>

CSS

/* NAVIGATION ELEMENTS */
ul#dropdown
{
    margin: 0;
    list-style: none;
    color: #FFFFFF;
}

ul#dropdown ul
{ 
    margin: 0;
    list-style: none;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #000000;
}

ul#dropdown ul ul,ul#dropdown ul ul ul
{
    top: -1px;
    left: 100%;
    border: 1px solid #000000;
}

ul#dropdown li
{
    float: left;
    display: inline;
    position: relative;
    width: 165px;
    border-right: 1px solid #ffffff;
    line-height: 50px;
}

ul#dropdown ul li
{
    width: 100%;
    display: block;
    background-color: #e1e6e8;
    border: 0;
    height: 30px;
    line-height: 30px;
}

/* Root Menu */
ul#dropdown a
{
    float: left;
    display: block;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    text-align: center;
}

ul#dropdown li:hover a:hover
{
    font-weight: bold;
}


/* 2nd Menu */
ul#dropdown li:hover li a
{
    float: none;
    color: #ffffff;
    text-align: left;
    width: 153px;
    padding-left: 10px;
    color: #000000;
}

/* 2nd Menu Hover Persistence */
ul#dropdown li:hover li a:hover
{
    background-color: #aab6bb;
}
/* END NAVIGATION ELEMENTS */

JQUERY

$('#dropdown li').mouseenter(function() {
      $('#dropdown li').not(this).children('ul').hide(); // Hide other child lists
      $(this).children('ul').show(); // Show this one
});
$('#dropdown').mouseleave(function() {
      var lists = $('li ul', this);
      setTimeout(function() {
            lists.hide(); // Hide all lists
      }, 250); // After 1/4 second
});

我希望有人可以帮我解决这个问题。如果您需要任何其他信息，请与我们联系。

非常感谢，罗尔夫

Answer 1

更新了（代码和jsfiddle网址）： 这是一个有理想结果的小提琴手 http://jsfiddle.net/7PFDv/

我在CSS中添加的唯一内容是深色背景（以便可以看到导航）和以下

ul#dropdown ul
{
    display: none;
}

我将你的jquery编辑为以下

$('#dropdown li').mouseenter(function() {

      $(this).children('ul').show(); // Show this one
});

$('#dropdown>li').mouseleave(function() {

      //$(this).children('ul').hide(); // Show this one
    var lists = $(this).find('ul');
      setTimeout(function() {
            lists.hide(); // Hide all lists
      }, 250); // After 1/4 second

});

$('#dropdown>li li').mouseleave(function() {

      $(this).children('ul').hide(); // hide this one

});

带有“隐藏延迟”的jQuery导航

1 个答案: