jQuery可扩展菜单

<div id="firstDiv"> 
    <div id="secondDiv"> 
     <ul id="accordionMenu"> 
      <li><a href="#">menu item</a></li> 
      <li><a href="#">menu item</a> 
       <ul> 
        <li><a href="#">suboption 1</a></li> 
        <li><a href="#">suboption 2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">menu item</a></li> 
      <li><a href="#">menu item</a></li> 
      <li><a href="#">menu item</a></li> 
     </ul> 
    </div> 
</div>

如何使其可扩展？jQuery可扩展菜单

我有以下的JavaScript代码：

$(document).ready(function() { 
    // Collapse everything but the first menu: 
    $("#accordionMenu > li > a").not(":first").find("+ ul").slideUp(1); 
    // Expand or collapse: 
    $("#accordionMenu > li > a").click(function() { 
     $(this).find("+ ul").slideToggle("fast"); 
    }); 
});

来源

2012-07-12 el.severo

什么不工作？你看到错误吗？奇怪的行为？请描述一下。 – Mathletics 2012-07-12 14:46:41

什么是+ ul .... – 2012-07-12 14:47:27

@Random请参阅：http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors – Yoshi 2012-07-12 14:50:45

@Yoshi：谢谢。我会在这里的答案，希望能帮助别人

HTML

<div id="firstDiv"> 
    <div id="secondDiv"> 
     <ul id="accordionMenu"> 
      <li><a href="#">menu item</a></li> 
      <li><a href="#">menu item</a> 
       <ul> 
        <li><a href="#">suboption 1</a></li> 
        <li><a href="#">suboption 2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">menu item</a></li> 
      <li><a href="#">menu item</a></li> 
      <li><a href="#">menu item</a></li> 
     </ul> 
    </div> 
</div>

jQuery的：

// Collapse everything but the first menu: 
$("#accordionMenu > li > a").not(":first").find("+ ul").slideUp(1); 

// Expand or collapse: 
$("#accordionMenu > li > a").click(function() { 
    $(this).find("+ ul").slideToggle("fast"); 
});

不要忘了包括jQuery库:)

来源

2012-09-07 12:49:48

介绍说明你指的是哪个jQuery库到这里？ – fraxture 2014-09-27 14:24:03

@fraxture：意思哪个版本？ jQuery> = 1.9.x – 2014-10-04 21:50:41

jQuery可扩展菜单

回答

相关问题