Странные проблемы с разворачиванием и свертыванием элементов списка в сгенерированной форме

Question

Я надеюсь, что кто-то сможет показать мне а) что вызывает текущие проблемы б) в целом более элегантное решение для следующей задачи:

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

Вложенная разметка меню по существу следующая:

<nav id="projects">
<ul class="menu">
    <li class="page_item page-item-249">
        <a href="...">Selected projects</a>
        <ul class="children">
            <li class="page_item page-item-298"><a href="..." >Level 2</a></li>
            <li class="page_item page-item-263"><a href="..." >Level 2</a></li>
            <li class="page_item page-item-212"><a href="..." >Level 2</a></li>
        </ul>
    </li>
    <li class="page_item page-item-238">
        <a href="...">Archive</a>
        <ul class="children">
            <li class="page_item page-item-33">
                <a href="...">Level 2</a>
                <ul class="children">
                    <li class="page_item page-item-46"><a href="...">Level 3</a></li>
                    <li class="page_item page-item-48"><a href="...">Level 3</a></li>
                </ul>
            </li>
            <li class="page_item page-item-35">
                <a href="...">Level 2</a>
                <ul class="children">
                    <li class="page_item page-item-52"><a href="...">Level 3</a></li>
                    <li class="page_item page-item-57"><a href="...">Level 3</a></li>
                    <li class="page_item page-item-59"><a href="...">Level 3</a></li>
                    <li class="page_item page-item-61"><a href="...">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JQuery выглядит следующим образом:

$(".page_item a").click( function(){

    /* Set vars */
    var $this = $(this);
    var isActive = false;
    var hasSublinks = false;
    var nextLevel = $(this).next("ul");

    if ( $this.next().html() !== null ) {hasSublinks = true;}
    if ( $this.hasClass('active') ) {isActive = true;}

    if ( !hasSublinks ) {
        return true;
    } else {
        /* I have sub links... */
        if (!isActive) {
            /* I am not active */
            $(".active").removeClass("active");
            $(".children").slideUp();

            $(this).next("ul").slideDown();
            $(this).addClass('active');

        } else {
            $(nextLevel).slideUp();
            $(this).removeClass('active');

        }
        return false;
    }

});

Когда я нажимаю «Архив», он расширяет свой дочерний список, как и ожидалось. Тем не менее, когда я нажимаю на ссылку здесь, я ожидаю, что она скатится вниз и откроет следующий уровень (Уровень 3), но она имеет противоположный эффект скольжения вверх , чтобы вернуться туда, откуда я начал.

Я провел много времени в консоли, на Wordpress Codex, пытаясь понять, в чем может быть проблема, особенно сложной для меня является то, что этот код работал раньше (или, казалось, работал). Я знаю, что код не самый чистый, поэтому я очень надеюсь показать мне, где я ошибаюсь!

Спасибо

Answer 1

У вас, кажется, нигде нет активного класса, поэтому, когда вы делаете это:

  if ( $this.hasClass('active') ) {isActive = true;}

Активно установлено значение false

Итак, вы идете в этой части кода:

if (!isActive) {
        /* I am not active */
        $(".active").removeClass("active");
        $(".children").slideUp();

В вашей логике явно есть проблема, попробуйте исправить ее, я дам вам подсказку, если вы ничего не найдете