Question

嘿我正在尝试创建一个带有嵌入式列表的菜单，当它悬停在下面时会向下滑动辅助列表或淡化列表，到目前为止，我只需要帮助JQuery获取效果。我的HTML是：

<div id="nav">
    <ul>
      <li>
        <h2>YEKTY</h2>
        <ul>
          <li>HOME</li>          
          <li>ABOUT US</li>          
          <li>WHO ARE WE?</li>
          </ul>
      </li>
    </ul>
    <ul>
      <li>
        <h2>LINKS</h2>
        <ul>
          <li>YTU</li>
          <li>IPICCO ME</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <h1>INFO</h1>
        <ul>
          <li>CONTACT</li>
        </ul>
      </li>
    </ul>
    </li>
    </ul>
  </div>

和css是：

/******NAVIGATION******/
div#nav {
 width: 100%;
 background: transparent;
 float: left;
 text-align:center;
}

#nav ul {
 list-style: none;
 margin: 0;
 width:100px;
 padding: 0px;
 float: left;
 cursor:pointer;
}
#nav ul h1 {
 width:112px;
}
#nav a, #nav h2, #nav h1 {
 font: bold 11px/16px arial, helvetica, sans-serif;
 display: block;
 margin: 0;
}
#nav h2 {
 color: #fff;
 background: #000 url(images/nav_bg_flip.png);
 text-transform: uppercase;
}
#nav h1 {
 color: #fff;
 background:#000 url(images/nav_bg_flip.png);
 text-transform: uppercase;
 -moz-border-radius: 0 0 90px 0;
 -webkit-border-radius: 0 0 90px 0;
 border-radius: 0 0 90px 0;
}
#nav a {
 color: #fff;
 background: #000;
 text-decoration: none;
}
#nav a:hover {
 color: #fff;
 background: #a9a9a9;
}
#nav h2:hover {
 color:#fff;
 opacity:0.7;
}
#nav h1:hover {
 color:#fff;
 opacity:0.7;
}
#nav li {
 position: relative;
}
#nav li li a {
 opacity:0.7;
}
#nav li li a:hover {
 opacity:0.9;
 background:#464646;
}
#nav ul ul {
 position: absolute;
}
div#nav ul ul, div#nav ul li:hover ul ul{
 display: none;
}
div#nav ul li:hover ul{
 display: block;
}
/******END NAVIGATION******/

我不需要帮助CSS或HTML只是效果，<li>元素内部有链接，虽然我不能发布那么多。谢谢！

Answer 1

类似的东西：

$('#nav ul h2').hover(function() {
    $(this).nextAll('ul:first').slideDown();
}, function() {
    $(this).nextAll('ul:first').slideUp();
});

假设您希望当您将鼠标悬停在ul上时显示h2;）

悬停功能的文档位于：http://api.jquery.com/hover/

编辑：我也打算尝试这个，但是jsfiddle似乎已经失效或者无法从我所在的位置到达。我希望它适合你，我会尽我所能。

编辑：正如评论中所建议的那样，这可能会更好：

$('#nav>ul>li').hover(function() {
    $('ul:first', this).slideDown();
}, function() {
    $('ul:first', this).slideUp();
});

帮助JQuery在菜单上

1 个答案: