jquery - 如何创建一个简单的三级 jQuery Accordion 菜单？

Question

你能帮我做一个三级 jQuery Accordion 菜单吗？

我有一个运行良好的两级 Accordion ，但添加第三级已被证明是一个问题。

菜单 HTML 非常简单，三个级别的 UL:

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

调用的脚本是jquery 1.9.1和jquery ui 1.9.2，菜单使用 Accordion 功能。

菜单开始于:

$(function() {
   $( ".accordion" ).accordion({    
      autoHeight: false,
      navigation: true,
      active: false
   });
});

但是当我添加第三个级别时，所有级别项目都保持打开和可点击状态。

我花了很多时间浏览 Accordion 文档，但找不到实现第三级功能的方法。

当我尝试双重定位时，我的菜单可以正常工作(正确滑动)，但我无法点击第三层的链接!

$(function() {
   $( ".accordion, .accordion ul" ).accordion({ 
      autoHeight: false,
      navigation: true,
      active: false
   });
});

Answer 1

尝试添加 collapsible:true，它可能适合您。

演示:http://jsfiddle.net/GCu2D/756/

$(function () {
    $("ul").accordion({
        autoHeight: false,
        navigation: true,
        active: false,
        collapsible: true
    });
});