javascript - 如何更正我的代码以使“onclick”切换器组件仅适用于图标？

Question

我有一个用 javascript 制作的可折叠组件。我希望它能够工作，以便当您单击图标时菜单会下拉/折叠。它当前的工作方式是，如果您单击整行上的任意位置，则适用此规则。

const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach((item) =>
  item.addEventListener("click", function() {
    this.classList.toggle("collapsible--expanded");
  })
);

.collapsible__header {
  display: flex;
  justify-content: space-between;
}

.collapsible__heading {
  margin-top: 0;
}

.collapsible__chevron {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}

.collapsible__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s;
}

.collapsible--expanded .collapsible__chevron {
  transform: rotate(0);
}

.collapsible--expanded .collapsible__content {
  max-height: 100vh;
  opacity: 1;
}

.collapsible .icon {
  height: 50px;
  width: 50px;
}

<div class="collapsible">
  <header class="collapsible__header">
    <h2 class="collapsible__heading">Item 1</h2>
    <svg class="icon icon--white collapsible__chevron">
      <use xlink:href="images/integratesprite.svg#chevron"></use>
    </svg>
  </header>
  <div class="collapsible__content">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, adipisci.
  </div>
</div>

标签： javascripthtmlcss

Answer 1

因为 SVG 是不可见的，所以我不得不添加一个带有 SVG 类的跨度。

如果删除跨度，代码应该在 svg 上工作

document.querySelector(".collapsible__chevron").addEventListener("click", function(e) {
  this.closest(".collapsible").classList.toggle("collapsible--expanded");
})

.collapsible__header {
  display: flex;
  justify-content: space-between;
}

.collapsible__heading {
  margin-top: 0;
}

.collapsible__chevron {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}

.collapsible__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s;
}

.collapsible--expanded .collapsible__chevron {
  transform: rotate(0);
}

.collapsible--expanded .collapsible__content {
  max-height: 100vh;
  opacity: 1;
}

.collapsible .icon {
  height: 50px;
  width: 50px;
}

<div class="collapsible">
  <header class="collapsible__header">
    <h2 class="collapsible__heading">Item 1</h2><span class="icon icon--white collapsible__chevron">▼&lt;/span>
  </header>
  <div class="collapsible__content">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, adipisci.
  </div>
</div>