Аккордеон jQuery для нескольких вложенных списков

Я изо всех сил пытаюсь включить второй вложенный список моего меню, чтобы они могли открываться по щелчку. Ниже мой код.

Кроме того, как я могу сделать так, чтобы нажатие на расширение списка не вызывало никаких других событий? Прямо сейчас, если вы нажмете на них, все мое меню будет закрыто из другого скрипта (это для мобильного адаптивного меню). Поэтому, если мой пункт меню li имеет вложенный список, я хочу, чтобы щелчок ТОЛЬКО открывал или закрывал его вложенный список и выполнял ничего больше.

http://jsfiddle.net/notanothercliche/36vCh/

<ul class="menu" id="menu-menu">

    <li class="menu-item>Home</li> <!-- end Home menu-item -->

    <li class="menu-item>Properties

    <ul class="dropdown-menu">

        <li class="menu-item>Dubai

        <ul class="dropdown-menu">

            <li class="menu-item>Residential

            <ul class="dropdown-menu">

                <li class="menu-item>Apartments</li>

                <li class="menu-item>Villas</a></li>

            </ul> <!-- end Residential dropdown-menu -->

                </li> <!-- end Residential menu-item -->

        </ul> <!-- end Dubai dropdown-menu -->

        </li> <!-- end Dubai menu-item -->

    </ul> <!-- end Properties dropdown-menu -->

    </li> <!-- end Properties menu-item -->

</ul> <!-- end menu-menu -->

person NotAnotherCliche    schedule 13.04.2014    source источник
comment
Имейте в виду, что якоря должны иметь непустые атрибуты href.   -  person isherwood    schedule 13.04.2014


Ответы (1)


Вам не нужно так много работать. Вероятно, нет необходимости манипулировать классами, как вы.

http://jsfiddle.net/isherwood/36vCh/6

jQuery("#menu-menu a").on("click", function (e) {
    if (jQuery(this).parent().has("ul")) {
        e.preventDefault();
    }
    $(this).next('ul').slideToggle();
});

Обратите внимание, что я добавил несколько отсутствующих кавычек и необходимые атрибуты href.

person isherwood    schedule 13.04.2014