如何使用jQuery创建多级jquery手风琴菜单？

Question

我想用jQuery创建多级手风琴导航,我尝试使用这个脚本,但它不允许多级.请查看图片我在寻找什么,

http://www.i-marco.nl/weblog/jquery-accordion-menu/#

替代文字http://img36.imageshack.us/img36/7897/multilevelaccordian.png

谢谢

Answer 1

首先标记您的项目,如此.您需要使用"accordion"类标记任何子菜单.

<ul class="accordion">
  <li><a class="head" href="#">Item 1</a>
      <ul class="accordion">
      <li><a href="#">Item 1 - 1 </a></li>
      <li><a href="#">Item 1 - 2</a></li>
      <li>
        <a href="#">Item 1 - 3</a>
        <ul class="accordion">
          <li><a href="#">Item 1 - 3 - 1</a></li>
          <li><a href="#">Item 1 - 3 - 1 </a></li>
          <li><a href="#">Item 1 - 3 - 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li>
    <a href="#">Item 3</a>
    <ul class="accordion">
      <li><a href="#">Item 3 - 1 </a></li>
      <li><a href="#">Item 3 - 2</a></li>
      <li><a href="#">Item 3 - 2</a></li>
    </ul>
  </li>
</ul>

之后只需使用jQuery UI的手风琴插件(不要忘记包含jQuery核心文件和jQuery UI文件.

<script type="text/javascript">
    $(function() {
        $(".accordion").accordion();
    });
</script>

http://jqueryui.com/demos/accordion/

使用CSS根据需要设置样式.当然,结构和类名可以更改为首选.这只是最简单的解决方案