Jquery UI 嵌套 Accordion ，内容位于顶级 Accordion 中

Question

我正在尝试创建一个包含多个组织级别的导航菜单。我正在构建一个嵌套的 jQuery UI Accordion，如果我的所有内容都位于 Accordion 的最低级别(最深)嵌套中，则效果很好。问题是某些元素将包含内容和子 Accordion 。如果我在顶部 Accordion 旁边放置一些文本，它看起来很棒...但是一旦我将它包裹在标签中，它就会破坏该元素中的嵌套 Accordion

这是我试图让它看起来像的模型 Photo Mockup

我当前的 HTML

    <div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>

   <div class="accordian">
           I really want a list here!
        <h3><a class=href="#">A</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            </div>
        <h3><a href="#">B</a></h3>
        <div>    
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
       </div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div class="accordian">
         <ul>
                <li>But They</li>
                <li>Do Not</li>
                <li>Work</li>
            </ul>
        <h3><a href="#">A2</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
        <h3><a href="#">B2</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
    </div>
</div>

Jquery

 $("div.accordian").accordion({
        autoHeight: false,
        collapsible: true,
        active: false

    });

运行这样的代码会为第一部分生成一个良好的嵌套 Accordion ，但第二部分渲染不正确。看起来 jQuery 开始抓取标题后的第一个 html 元素来构建 Accordion 。

我在调用 Accordian 时指定了 header 选项，如下所示

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false,
    header: 'h3'

});

这已经接近预期的效果了。该列表呈现在正确的位置，但第二部分中的嵌套 Accordion 不起作用。

我有一个Fiddle设置

Answer 1

这应该有效

<div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>

   <div class="accordian">
           I really want a list here!
        <h3><a class=href="#">A</a></h3>
        <div>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            </div>
        <h3><a href="#">B</a></h3>
        <div>    
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
       </div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div> <-- A Wrapper -->
             <ul>
                    <li>But They</li>
                    <li>Do Not</li>
                    <li>Work</li>
                </ul>
         <div class="accordian">
            <h3><a href="#">A2</a></h3>
            <div>
                <ul>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                </ul>
            </div>
            <h3><a href="#">B2</a></h3>
            <div>
                <ul>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                </ul>
            </div>
        </div>
    </div>
</div>

演示:Fiddle

对于选项卡 Two，您需要创建另一个包装元素，并将 ul 和子 accordion 作为其子元素