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可擴展菜單

回答

相關問題