Javascript 在Wordpress生成的表单中展开和折叠列表元素时出现奇怪的问题

Javascript 在Wordpress生成的表单中展开和折叠列表元素时出现奇怪的问题,javascript,jquery,wordpress,menu,Javascript,Jquery,Wordpress,Menu,我希望有人能给我看看 a) 是什么导致了当前的问题 b) 更优雅的解决方案 对于以下问题: 我正在从Wordpress博客中提取所有页面,其想法是创建一个菜单,其中子导航在用户交互时展开和收缩 嵌套菜单标记基本上如下所示: <nav id="projects"> <ul class="menu"> <li class="page_item page-item-249"> <a href="...">Selected proj

我希望有人能给我看看 a) 是什么导致了当前的问题 b) 更优雅的解决方案 对于以下问题:

我正在从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>
$(".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上,试图找出可能存在的问题,对我来说尤其具有挑战性的是,这段代码以前是有效的(或者看起来是有效的)。我知道代码不是最干净的,所以我真的希望能告诉我哪里出了问题


谢谢

您似乎没有在任何地方激活该类,因此当您执行此操作时:

  if ( $this.hasClass('active') ) {isActive = true;}
它将活动设置为false

这部分代码:

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

您的逻辑显然有问题,请尝试解决它,如果您什么也没发现,我会给您一个提示

您在这里找到/尝试了什么吗?