Javascript 不使用jQuery切换多个子菜单项

我有一个三层的响应菜单，我有一些普通的JavaScript来切换

ul

类。它可以工作，但仅适用于导航中出现的第一个子菜单。这是针对WordPress主题的，所以我无法真正控制切换后的子菜单的位置或数量

请不要用jQuery

以下是标记：

<nav id="site-navigation" class="main-navigation">
    <div id="primary-menu" class="menu">
    <ul>
        <li class="page_item page-item-703"><a href="/blog/">Blog</a></li>
        <li class="page_item page-item-701"><a href="/front-page/">Front Page</a></li>
        <li class="page_item page-item-2"><a href="/sample-page/">Sample Page</a></li>
        <li class="page_item page-item-6 page_item_has_children"><a href="/about/">About The Tests</a><span class="sub-nav-toggle">›</span>
            <ul class='children'>
                <li class="page_item page-item-1133"><a href="/about/page-image-alignment/">Page Image Alignment</a></li>
                <li class="page_item page-item-1134"><a href="/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
                <li class="page_item page-item-501"><a href="/about/clearing-floats/">Clearing Floats</a></li>
                <li class="page_item page-item-155"><a href="/about/page-with-comments/">Page with comments</a></li>
                <li class="page_item page-item-156"><a href="/about/page-with-comments-disabled/">Page with comments disabled</a></li>
            </ul>
        </li>
        <li class="page_item page-item-174 page_item_has_children"><a href="/level-1/">Level 1</a><span class="sub-nav-toggle">›</span>
            <ul class='children'>
                <li class="page_item page-item-173 page_item_has_children"><a href="/level-1/level-2/">Level 2</a><span class="sub-nav-toggle">›</span>
                    <ul class='children'>
                        <li class="page_item page-item-172"><a href="/level-1/level-2/level-3/">Level 3</a></li>
                        <li class="page_item page-item-746"><a href="/level-1/level-2/level-3a/">Level 3a</a></li>
                        <li class="page_item page-item-748"><a href="/level-1/level-2/level-3b/">Level 3b</a></li>
                    </ul>
                </li>
                <li class="page_item page-item-742"><a href="/level-1/level-2a/">Level 2a</a></li>
                <li class="page_item page-item-744"><a href="/level-1/level-2b/">Level 2b</a></li>
            </ul>
        </li>
        <li class="page_item page-item-146"><a href="/lorem-ipsum/">Lorem Ipsum</a></li>
        <li class="page_item page-item-733"><a href="/page-a/">Page A</a></li>
        <li class="page_item page-item-735"><a href="/page-b/">Page B</a></li>
    </ul>
    </div>
</nav><!-- #site-navigation -->

就像我说的，这只会切换出现在

nav

中的第一个子菜单。

.active

类更改最大高度以显示子菜单

我正在使用此脚本向

li

添加一个带有

.sub-nav-toggle

类的span:

/**
* Add toggles to menu items that have submenus.
*/
var x = document.body.querySelectorAll('.page_item_has_children > a');
var index = 0;
for (index = 0; index < x.length; index++) {
     var navArrow = document.createElement('span');
     navArrow.className = 'sub-nav-toggle';
     navArrow.innerHTML = '&rsaquo;';
     x[index].parentNode.insertBefore(navArrow, x[index].nextSibling);
}

/**
*向具有子菜单的菜单项添加切换。
*/
var x=document.body.querySelectorAll（'.page\u item\u有子项>a'）；
var指数=0；
对于（索引=0；索引

---

我知道如何使用jQuery执行此操作，但我不想加载所有jQuery来完成这一任务。

问题是您在非jQuery脚本中使用jQuery逻辑：

document.querySelector('.sub-nav-toggle').onclick = function(){
   document.getElementsByClassName('children')[0].classList.toggle("active");
};

首先

document.querySelector（'.sub-nav-toggle'）

将只返回带有

.sub-nav-toggle

的第一个元素

您需要使用

querySelectorAll

返回

.sub-nav toggle

元素数组

然后需要为每个元素设置

onclick

函数

第二个错误是

document.getElementsByClassName（'children'）[0].classList.toggle（“active”）。这将仅切换第一个
.children
元素。
您需要在单击的
.sub-nav-toggle
的父级中找到
.children

工作演示：

或下面的片段：


var x=document.body.querySelectorAll（'.page\u item\u has\u children>a'）；
var指数=0；
对于（索引=0；索引

.active、.active a{
颜色：红色；
}
.副导航开关{
光标：指针；
}































我在html代码中看不到任何
.sub-nav-toggle
对不起，加载页面时正在添加脚本。我刚刚在帖子中添加了代码。我已经发布并更新了答案。。。请看一看
document.querySelector('.sub-nav-toggle').onclick = function(){
   document.getElementsByClassName('children')[0].classList.toggle("active");
};