Question

我对这个手风琴剧本有点小问题。

我知道为什么会这样，但我无法修复它。而且我不确定是否可以修复它？

我正在使用的手风琴脚本就是这个，它很容易实现。 http://www.i-marco.nl/weblog/jquery-accordion-menu/

这种手风琴的标记很简单，也很语义。

<ul class="menu">

    <li>
        <a href="#">Link</a>
        <ul class="acitem">
            <li><a href="http://www.pivotx.net/">PivotX</a></li>
            <li><a href="http://www.wordpress.org/">WordPress</a></li>
            <li><a href="#four">four</a></li>
            <li><a href="http://www.textpattern.com/">Textpattern</a></li>
            <li><a href="http://typosphere.org/">Typo</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Weblog Tools</a>
        <ul class="acitem">
            <li><a href="http://www.pivotx.net/">PivotX</a></li>
            <li><a href="http://www.wordpress.org/">WordPress</a></li>
            <li><a href="#four">four</a></li>
            <li><a href="http://www.textpattern.com/">Textpattern</a></li>
            <li><a href="http://typosphere.org/">Typo</a></li>
        </ul>
    </li>

    <!-- and so fourth -->

</ul>

这是脚本设计用于处理的标记样式。它有效，请看这里...... http://jsfiddle.net/motocomdigital/CzZqZ/1/

但我的问题是因为我正在使用一个模板，我无法更改标记，请参阅下面输出的标记。

<ul class="menu">

    <ul>
        <li>
            <a href="#">Link</a>
            <ul class="acitem">
                    <li><a href="http://www.pivotx.net/">PivotX</a></li>
                    <li><a href="http://www.wordpress.org/">WordPress</a></li>
                    <li><a href="#four">four</a></li>
                    <li><a href="http://www.textpattern.com/">Textpattern</a></li>
                    <li><a href="http://typosphere.org/">Typo</a></li>
            </ul>
        </li>
    </ul>

    <ul>
        <li>
            <a href="#">Weblog Tools</a>
            <ul class="acitem">
                    <li><a href="http://www.pivotx.net/">PivotX</a></li>
                    <li><a href="http://www.wordpress.org/">WordPress</a></li>
                    <li><a href="#four">four</a></li>
                    <li><a href="http://www.textpattern.com/">Textpattern</a></li>
                    <li><a href="http://typosphere.org/">Typo</a></li>
            </ul>
        </li>
    </ul>

</ul>

这是输出的标记，这是愚蠢的。

它的输出超出了它的需要。

我为上面的标记创建了一个js小提琴，这样你就可以看到发生了什么http://jsfiddle.net/motocomdigital/CzZqZ/2/

当一个新的开放时，它并没有关闭其他人......

有没有人知道如何修复脚本，所以它像第一个jsfiddle一样工作，但上面有疯狂的标记？

非常感谢，如果有人可以提供帮助的话。

约什

Answer 1

在点击处理程序中，更改为：var parent = this.parentNode.parentNode.parentNode;。有了它，它就像你发布的另一个例子一样。

Answer 2

将“on”类添加到要展开/折叠的“ul”元素。

示例：

<ul class="menu">
    <ul class="noaccordion">
        <li>
            <a href="#">Click Here</a>
            <ul class="acitem">

jQuery手风琴问题与模板标记

2 个答案: