为什么 document.querySelectorAll return 在此上下文中是一个空数组？

Question

我有以下一组 HTML 个元素

带class选项的无序列表在页面加载时不显示：

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

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

我该如何解决这个问题？

/* 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

您可能想要切换 class 而不是

/* 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 而不是 options 吗？

为什么 document.querySelectorAll return 在此上下文中是一个空数组？

Why does document.querySelectorAll return an empty array in this context?

javascript

jquery-selectors