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>

我几乎可以让它工作，它只输出一个acordion中的第一个子链接，我正在使用

    <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事件上应用函数并迭代下一个<li>元素，直到您点击另一个标题元素。然后将这些元素包装到<div>中，看看手风琴是否能正常工作。

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();

从非标准HTML结构创建jQuery Accordion

2 个答案: