具有纯javascript的多级列表菜单

Question

我正在尝试使用JS创建多级纯javascript菜单。BUt 它只捕获第一个元素。

(function() {

document.querySelector('.more').addEventListener('click', function() {

this.classList.toggle('open')
}, false);
})();

li ul {display: none}
li.open ul {display: block}

<ul>
<li>1</li>
<li class="more">
2
<ul>
<li>2,1</li>
<li>2.2</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li class="more">
4
<ul>
<li>4.1</li>
<li>4.2</li>
</ul>
</li>

</ul>

<ul>
<li>1</li>
<li class="more">
2
<ul>
<li>2,1</li>
<li>2.2</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li class="more">
4
<ul>
<li>4.1</li>
<li>4.2</li>
</ul>
</li>
</ul>

当我尝试运行查询选择器时，它给了我一个错误，说querySelectorAll((.addEventListener不是一个函数。

有人能看到我在这里做错了什么吗？ 谢谢。

Answer 1

document.querySelectorAll返回一个元素数组。

你只需要遍历它们(例如：用Array.forEach(，并将你的事件侦听器添加到每个可扩展元素，如下所示：

(function() {
// get all elements with class 'more'
let expandableElem = document.querySelectorAll('.more');

// loop through each expandable element, adding click listener
expandableElem.forEach(li => {
li.addEventListener(
'click',
function() {
this.classList.toggle('open')
},
false
)
});
})();

li ul {display: none}
li.open ul {display: block}

<ul>
<li>1</li>
<li class="more">
2
<ul>
<li>2,1</li>
<li>2.2</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li class="more">
4
<ul>
<li>4.1</li>
<li>4.2</li>
</ul>
</li>

</ul>

Answer 2

使用 querySelecrotAll 获取元素数组，然后单独遍历它们以应用事件侦听器。

https://www.w3schools.com/jsref/met_element_queryselectorall.asp

改编代码：

(function() {
document.querySelectorAll('.more').forEach(element =>
element.addEventListener('click', function() {
this.classList.toggle('open')
}, false)
);
})();

Answer 3

document.querySelectorAll 是您要查找以选择所有 .more 元素的内容。之后，使用 'forEach' 或 'for' 循环在每个 .more 元素上添加 EventListener。

<ul class="nav">
<li>1</li>
<li class="more">2
<ul>
<li>2,1</li>
<li>2.2</li>
</ul>
</li>
<li>3</li>
<li>4</li>
<li class="more">5
<ul>
<li>5.1</li>
<li>5.2</li>
</ul>
</li>
</ul>
<script>
(function() {
var elm = document.querySelectorAll('.more');
for (var i=0; i< elm.length; i++) {
elm[i].addEventListener('click', function() {
// optional 'remove' other elm's
this.classList.toggle('open');
}, false);
}
})();
</script>

使用一些最小的 CSS

.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
position: relative;
z-index: 597;
float: left;
}
.nav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
min-width: 150px;
}
.nav .open ul {
display: block;
}
.nav li {
position: relative;
cursor: pointer;
padding: 4px 10px;
}
.nav > li {
float: left;
}
.nav ul li {
float: none;
}