3

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”（如上所示）并像这样设置手风琴......

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

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

谢谢您的帮助。

4

1 回答 1

1

手风琴不寻找div. 它在标题之后查找下一个元素。
因此，您可以对给定的标记进行后处理。只需在应用手风琴之前插入此代码：

$("li.drop").each(function() {
    $(this).after($(this).find(".sub-menu"));
});
于 2012-06-07T20:24:05.307 回答