jQuery Selector子菜单/下拉列表

Question

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

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

Answer 1

如果我理解您的问题，则需要进行简单的更改：$('#access')应为$('#access > ul > li')（假设#access是最高ul的父级。）

然后悬停函数将应用于li，找到其单个子菜单ul，而目前，您正在查找所有子菜单。

Answer 2

我只能想象你想做什么。

查看示例和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);
    })
});