从非标准 HTML 结构创建 jQuery Accordion

Question

我们都知道您使用此结构来制作手风琴，

<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>

但是如果您想使用由糟糕的 CMS 设置的现有代码来创建手风琴，该怎么办？

这是我几乎可以让它工作的布局

 <div id="sideNavContent" class="clearfix">
        <ul>
        <!-- Left Nav (selected) level: 2 - Not hidden - with children -->
           <li class="NML3Selected"><div><a id="NML3LinkSelected" href="/forcedelivered.aspx" title="Force Delivered">Force Delivered</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 1</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 2</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 3</a></div></li>
           <li class="NML3"><div><a id="NML3Link" href="/ftmfaq.aspx" title="Force Training Frequently Asked Questions">FAQs</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 4</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 5</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 6</a></div></li>
           <li class="NML3"><div><a id="NML3Link" href="/trainingsupport.aspx" title="Training Support">Training Support</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 7</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 8</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 9</a></div></li>
        </ul>
        </div>

，它只输出手风琴中的第一个子链接，我

    <script type="text/javascript">
$(function() {
    $("#sideNavContent").accordion({
    collapsible: true, 
    active: false,
    header: "li.NML3",
    //header: "li:has(NML3)", //argh *sobs*
    navigation: true
    })

});
</script>

正在使用 jQuery WAS 命令，放弃了它（第一个标题作为 .NL3Selected 类，所以我希望手风琴看到它包含 NL3)

任何聪明的 jQueryness 欢迎，制作这个可怕的标记，作为手风琴工作..

p

Answer 1

我可能会编写自己的手风琴小部件。

不过，您可以尝试在折叠式 change 事件上应用函数，并迭代下一个

元素，直到遇到另一个标头元素。然后将这些元素包装到

中，看看手风琴是否能正常工作。

Answer 2

您可以预处理 html 并将其更改为您想要的内容，如下所示：

var sidenav = $('#sideNavContent');
sidenav.find('li').unwrap()
.filter('.NML3, .NML3Selected').each(function(){
    $(this).nextUntil('.NML3').find('div').unwrap().wrapAll('<div></div>');
}).find('div').unwrap().find('a').unwrap().wrap('<h2>');
sidenav.accordion();