jQuery 选择器子菜单/下拉菜单答案

【问题标题】：jQuery Selector Submenu / DropdownjQuery 选择器子菜单/下拉菜单
【发布时间】：2012-09-24 18:26:32
【问题描述】：

我想建立一个非常简单的子菜单：

HTML：

<ul>
  <li><a href="#">Main-item</a>
     <ul id="show">
        <li id="subitem"><a href="#">Sub-Item</a></li>
     </ul>
  </li>
</ul>

jQuery:

$(document).ready(function(){
  $('#access').hover(function () {
    $(this).find('ul').stop().animate({opacity:1, paddingTop:'10px'}, 400);
  }, function () {
    $(this).find('ul').stop().animate({opacity:0, paddingTop:'0px'}, 300);
  });
});

ul 有一个背景图片，我希望#show 应该是动画的，或者不仅仅是所有的 li

【问题讨论】：

现在只是 li 移动而不是 ul (#show)，我对正确的选择器有一些问题。 jsfiddle.net/ZLEQ4 灰色 div 不随 li 移动。

标签： jquery list drop-down-menu this submenu

【解决方案1】：

我只能想象你想做什么。

查看示例和此jsFiddle

样本

HTML

<div id="access">
<ul>
  <li><a href="#">Main-item</a>
     <ul id="show">
        <li id="subitem"><a href="#">Sub-Item</a></li>
     </ul>
  </li>
  <li><a href="#">Main-item 2</a>
     <ul id="show">
        <li id="subitem"><a href="#">Sub-Item</a></li>
     </ul>
  </li>    
</ul>
</div>

jQuery

$(document).ready(function()
{
    $('li[id!="show"]').hover(function () {
        $(this).find('ul#show').stop().animate({opacity:1, paddingTop:'10px'}, 400);
    }, function () {
        $(this).find('ul#show').stop().animate({opacity:0, paddingTop:'0px'}, 300);
    })
});

【讨论】：

谢谢，我的英语不是最好的。它应该看起来像这样：http://www.tuttoaster.com/wp-content/uploads/demos/3/navigation.html
很高兴为您提供帮助！祝你有美好的一天！

【解决方案2】：

如果我正确理解您的问题，您需要做一个简单的更改：$('#access') 应该是 $('#access > ul > li')（假设 #access 是顶部 ul 的父级）。

然后悬停功能将应用于li，找到它的单个子菜单ul，而目前，您可以找到所有子菜单。

【讨论】：

我认为它应该对你有用（我做到了：jsfiddle.net/wv5Zs/7）。无论如何，您应该避免在多个元素上使用相同的 id。