jQuery UI嵌套手风琴，顶级手风琴中带有内容

Question

我正在尝试创建一个包含多个层级组织的导航菜单。我正在构建一个嵌套的jQuery UI手风琴，如果所有的内容都在手风琴的最低级别（最深的）嵌套中，它会非常好用。问题是有些元素将具有内容和子手风琴。如果我在顶部手风琴内放置一些文本，它看起来很棒……但是一旦我把它包裹在标签中，它就会破坏该元素中的嵌套手风琴。

这是我想要实现的效果的草图：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

    });

运行代码时，第一部分会生成一个很好的嵌套手风琴，但第二部分呈现不正确。看起来 jQuery 开始在标题后面抓取第一个 HTML 元素来构建手风琴。

我在调用手风琴时指定了标题选项，如下所示：

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

});

这已经接近所期望的效果。列表在正确的位置呈现，但第二部分中嵌套的手风琴不起作用。

我已经设置了一个Fiddle。

- user2027355

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 放置在其中。

- Arun P Johny

---

完美地工作了...当然啦。有时候你会陷入一种思维方式中，以至于看不到一个简单的解决方案！谢谢你。 - user2027355

Answer 2

请查看这个例子

您说得对，它查找标题后的下一个元素，因此您只需使用div包装顶级手风琴的内容，然后包含您的子手风琴即可。

<h3><a href="#">Two</a></h3>

    <div>  <!-- This 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>

- Amin Eshaq

---

和Arun的回答一样...几乎同时出现。感谢你的帮助！ - user2027355