0

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

目标

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

问题

当我在第一个点“主页”上导航时，子导航点“新闻”就会出现。一旦我离开“家”，就会有 250 毫秒的延迟，直到“新闻”消失，到目前为止一切都很好。

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

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 */

查询

$('#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
});

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

非常感谢，罗尔夫

4

1 回答 1

0

更新（代码以及 jsfiddle URL）： 这里是 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

});
于 2012-04-23T16:20:30.140 回答