jQuery UI Accordion - 如何更改用于内容面板的元素

Question

jQuery UI Accordion 的标记如下所示...

<div id="accordion">

    <h3><a href="#">First header</a></h3>
    <div>First content</div>

    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>

</div>

长话短说，我正在使用的菜单的标记大部分超出了我的控制范围。看起来像这样...

<div id="sidebar">
    <ul>
        <li class="drop">
            <a href="#">xxxxxxxxxx</a>
            <ul class="sub-menu">
                <li>xxxxxxxxxx</li>
                <li>xxxxxxxxxx</li>
                <li>xxxxxxxxxx</li>
            </ul>
        </li>
        <li><a href="#">xxxxxxxxxx</a></li>
        <li><a href="#">xxxxxxxxxx</a></li>
        <li><a href="#">xxxxxxxxxx</a></li>
    </ul>
</div>

我可以有选择地向第一级列表项添加一个类，如果它们有子菜单，我就会这样做。我添加了“drop”(如上所示)并像这样设置 Accordion ......

$("#sidebar").accordion({
    header: 'li.drop'
});

那部分工作正常。我可以看到 jQuery 正在按预期添加所有 Accordion 类。问题在于该脚本正在寻找紧跟在标题后面的 div 来用作内容面板。我无法将 ul class="sub-menu" 包装在 div 中，因为我无法控制标记的该部分。我试图弄清楚如何设置哪个元素应用作内容面板，即带有“子菜单”类的 ul。有什么想法吗？

感谢您的帮助。

Answer 1

Accordion 不查找 div。它在 header 之后查找下一个元素。
因此，您可以对给定的标记进行后处理。只需在应用 Accordion 之前插入此代码即可:

$("li.drop").each(function() {
    $(this).after($(this).find(".sub-menu"));
});