为什么 document.querySelectorAll 在此上下文中返回一个空数组?

Question

>我有以下一组HTML元素

页面加载时不会显示带有类选项的无序列表：

我想在单击元素<div class="select-box">时显示它。为此，我有：

我不知道为什么，位console.log(selectBox)返回一个空数组。

我该如何解决这个问题？

/* Select Boxes */
function selectBoxToggle() {
let selectBox = document.querySelectorAll('.select-box');
console.log(selectBox);
selectBox.forEach(function(item) {
let options = item.querySelectorAll('.options');
item.addEventListener("click", options.style.display = 'block');
console.log(options);
});
}
// On document load
document.addEventListener("DOMContentLoaded", function() {
selectBoxToggle();
});

.select-box {
position: relative;
}
.select-box .caret {
position: absolute;
right: 1px;
top: 50%;
color: #999;
transform: translateY(-50%);
}
.select-box .selected-value {
height: 33px;
line-height: 32px;
border-bottom: 1px solid #ccc;
}
.select-box .options {
display: none;
position: absolute;
min-width: 100%;
background: #fff;
z-index: 99;
left: 0;
top: 33px;
margin-top: 1px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="select-box">
<div class="selected-value">Item 1</div>
<ul class="options elevation-1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="material-icons caret">arrow_drop_down</span>
</div>

Answer 1

您可能希望改为切换类

/* Select Boxes */
const selectBoxToggle = () => {
document.querySelector('.select-box').addEventListener("click",function() { // now you can use "this"
this.querySelector('.options').classList.toggle("hide")
});
}
// On document load
window.addEventListener("load",selectBoxToggle);

.select-box {
position: relative;
}
.select-box .caret {
position: absolute;
right: 1px;
top: 50%;
color: #999;
transform: translateY(-50%);
}
.select-box .selected-value {
height: 33px;
line-height: 32px;
border-bottom: 1px solid #ccc;
}
.select-box .options {
position: absolute;
min-width: 100%;
background: #fff;
z-index: 99;
left: 0;
top: 33px;
margin-top: 1px;
}
.hide { display:none }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="select-box">
<div class="selected-value">Items</div>
<ul class="options elevation-1 hide">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<span class="material-icons caret">arrow_drop_down</span>
</div>

Answer 2

您是否尝试过放置li而不是选项？