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

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

var coll=document.getElementsByClassName（“m40网格项目”）；
coll[i].addEventListener（“单击”），函数（evnt）{
让target=evnt.target；
如果（！target.matches（'.m40\u网格\u项'））{
target=target.closest（'.m40__网格__项目'）；
}
const currClassList=target.classList；
if（currClassList.contains（“active”））{
evnt.target.classList.remove（“活动”）；
var content=evnt.target.nextElementSibling；
content.style.maxHeight=null；
}否则{
对于（var j=0；j

这个标题不起作用
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

点击我！
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

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

---

完成该操作后，您应该使用target。

我认为这会起作用。我刚刚从循环中删除了这一行“coll[j].nextElementSibling.style.maxHeight=null；”

var coll = document.getElementsByClassName("m40__grid__item");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function (evnt) {
    const currClassList = evnt.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");
      }
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

var coll=document.getElementsByClassName（“m40网格项目”）；
对于（变量i=0；i

选项1 如果您想要快速修复，只需添加以下css：

.test{
指针事件：无；
}

这将使鼠标单击无法检测该元素

选择2 如果您想要一个真正的修复，下面是您做错的地方：

evnt.target

给出单击事件的真正目标，这是鼠标在单击时悬停的最内部元素。因此，这并不是确定应该向/从哪个元素添加/删除类

active

@AngelSalazar为这个问题提供了一个很好的解决方案，所以让我借用他的解决方案：

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;
    ...

这将通过元素的父元素反向查找选择器的匹配项，并将证明您正在与标题而不是其子元素交谈

以下是基于提供的代码笔的工作解决方案

var coll=document.getElementsByClassName（“m40网格项目”）；
对于（变量i=0；i

.m40\uuuu网格\uuu项目{
背景色：#777；
颜色：白色；
光标：指针；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.active、.m40\u网格\u项目：悬停{
背景色：#555；
}
.m40网格项目：之后{
字体系列：“FontAwesome”；/*启用插入符号必不可少*/
内容：“\f067”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
右边距：30px；
}
.活动：之后{
内容：“\f068”；
}
.m40网格项--全宽{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
}

这个标题不起作用
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

点击我！
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

我添加了代码，但它不起作用。我将更新问题。@JafarSalami我添加了工作解决方案。这是基于

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;
    ...