jQuery проблема аккордеона с разметкой шаблона

Question

У меня небольшая проблема с этим скриптом аккордеона.

И я знаю, почему это происходит, но я не могу это исправить. И я не уверен, что это можно исправить?

Я использую скрипт аккордеона, и его очень легко реализовать. http://www.i -marco.nl / блог / JQuery-аккордеон меню /

Наценка для этого аккордеона проста и семантическая.

<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, но с безумной разметкой выше?

Большое спасибо, если кто-нибудь может помочь.

Josh

Answer 1

В обработчике кликов измените на: var parent = this.parentNode.parentNode.parentNode;.С этим он работает как другой пример, который вы опубликовали.

Answer 2

Добавьте класс noaccordian к элементам ul, которые вы хотите развернуть / свернуть.

Пример:

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