javascript - 从子元素设置父样式

Question

我正在尝试创建一个自定义下拉字段。以下是我的代码:

const list = document.querySelector('.list');
const listItems = list.getElementsByTagName('p');

document.querySelector('#category').onclick = function() {
  // Able to show the .list DOM element
  list.style.display = 'block';
}

Array.from(listItems)
  .forEach(function(listItem) {
    listItem.onclick = function() {

      // Unable to hide the .list DOM element
      list.style.display = 'none';

      // .listItem's value is getting logged
      console.log(listItem.getAttribute('value'));
    }
  }
);

<div class="dropdown" id="category" name="category">
  <div class="trigger">
    <p class="selected-category">Category</p>
  </div>
  <div class="list">
    <p value="">None</p>
    <p value="1">harum inventore</p>
    <p value="2">dolorem voluptatem</p>
    <p value="3">dolores consectetur</p>
    <p value="4">velit culpa</p>
    <p value="5">beatae nulla</p>
  </div>
</div>

我不太确定哪里出了问题，因为我可以设置 list的style归因于display: block但我无法将其设置回 display: none即使我试图从两个不同的地方做同样的事情。

我对 JavaScript 还很陌生。这可能是重复的，但老实说，我尝试查找并尝试尽可能多的解决方案。但似乎没有一个起作用。所以提前道歉。

Answer 1

您的代码工作正常，但由于您的父级和子级都有单击事件监听器，因此您隐藏并显示了列表。

在这里您可以找到有关事件冒泡的更多信息:https://javascript.info/bubbling-and-capturing

const list = document.querySelector('.list');
const listItems = list.getElementsByTagName('p');

// Overlapping event listener 1
document.querySelector('#category').onclick = function() {
  list.style.display = 'block';
}

Array.from(listItems)
  .forEach(function(listItem) {
    // Overlapping event listener 2
    listItem.onclick = function(event) {
      // to fix double event issue, you have to prevent its bubbling up
      event.stopImmediatePropagation();
      list.style.display = 'none';
      // Uncomment the debugger here and you will see that this code works right
      // debugger;
      console.log(listItem.getAttribute('data-value'));
    }
  }
);

<div class="dropdown" id="category" name="category">
  <div class="trigger">
    <p class="selected-category">Category</p>
  </div>
  <div class="list">
    <p data-value="">None</p>
    <p data-value="1">harum inventore</p>
    <p data-value="2">dolorem voluptatem</p>
    <p data-value="3">dolores consectetur</p>
    <p data-value="4">velit culpa</p>
    <p data-value="5">beatae nulla</p>
  </div>
</div>