javascript - 当单击父元素时似乎正在拾取它的子元素

Question

我正在尝试使用 Vanilla JavaScript 制作手风琴，但是如果手风琴的标题中有一个子 div 元素似乎不起作用，我不知道为什么。但是，如果没有子 div 元素，则手风琴可以正常工作。

    var coll = document.getElementsByClassName("m40__grid__item");
coll[i].addEventListener("click", function (evnt) {
    let target = evnt.target;
    if ( !target.matches('.m40__grid__item') ) {
        target = target.closest('.m40__grid__item');
    }
    const currClassList = target.classList;
    if (currClassList.contains("active")) {
      evnt.target.classList.remove("active");
      var content = evnt.target.nextElementSibling;
      content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
        coll[j].classList.remove("active");
        coll[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

<div class="m40__grid">
  <div class="m40__grid__item">
    <div class="test">
      This header doesn't work
    </div>
  </div>
  <div class="m40__grid__item--full-width">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div class="m40__grid__item">Click me!</div>
  <div class="m40__grid__item--full-width">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

我的问题的代码笔是https://codepen.io/mrsalami/pen/WNrBboR?editors=1111

标签： javascripthtmlcss

Answer 1

我相信evnt.target可以是div.test，所以你需要像这样标准化目标

var target = event.target;
if (!target.matches('.m40__grid__item')) {
 target = target.closest('.m40__grid__item');
}

在该操作之后，您应该使用目标。