Question

我有三个级别的响应式菜单，我有一些vanilla 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 -->

以下是剧本：

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

就像我说的那样，这只会切换nav中出现的第一个子菜单。 .active类更改max-height以显示子菜单。

我使用此脚本将.sub-nav-toggle类的范围添加到li：

/**
* 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);
}

我知道如何使用jQuery，但我不想加载所有jQuery来完成这项任务。

Answer 1

问题是你在非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元素。您需要在点击的.children的父级中找到.sub-nav-toggle。

工作演示：https://jsfiddle.net/8ewua0aL/2/

或下面的代码段：

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 = '<b>[toggle]</b>';
	x[index].parentNode.insertBefore(navArrow, x[index].nextSibling);
}

var elements = document.querySelectorAll('.sub-nav-toggle');

for(var i in elements) {
	if(elements.hasOwnProperty(i)) {
		elements[i].onclick = function() {
			this.parentElement.querySelector('.children').classList.toggle("active");
		}
	}
}

.active, .active a {
	color: red;
}
.sub-nav-toggle {
  cursor: pointer;
}

<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>
            <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>
            <ul class='children'>
                <li class="page_item page-item-173 page_item_has_children"><a href="/level-1/level-2/">Level 2</a>
                    <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>

在没有jQuery的情况下切换多个子菜单项

1 个答案: