当我单击手风琴标题文本或人字形图标时，JavaScript手风琴不起作用

问题描述

我构建了一个手风琴，可以从输入中动态添加它，并且一切正常，除非单击手风琴标题文本时它不起作用，而且单击右侧的人字形图标时也会出现错误!!我不确定为什么会这样。如果我单击空白区域，它将正常工作而不会出现任何错误。您可以在codepen上查看演示和代码-> https://codepen.io/tauhidul-islam/pen/eYZBzLY 另外，这里还有一些屏幕截图，您可以理解。请让我了解发生了什么以及为什么。谢谢。

.container {
  width: 960px;
  margin: auto;
}

.add-input {
  padding: 15px;
  border: 1px solid #dadada;
}

.add-btn {
  background: white;
  padding: 15px 25px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  cursor: pointer;
}

/* Accordian Panel */

.accordion {
  display: flex;
  justify-content: space-between;
  background: #03a9f4;
  color: white;
  padding: 15px;
  box-shadow: 0px 0px 4px 0px #dadada;
  cursor: pointer;
}

.panel {
  display: none;
  background-color: white;
  padding: 15px;
}

.active {
  display: block;
}

<div class="container">
    <!-- Add Section -->
    <form class="add">
      <input type="text" name="add" class="add-input">
      <button type="submit" class="add-btn">Add Section</button>
    </form>

    <!-- Section List -->
    <div class="section-list"></div>
</div>

{{1}}

解决方法

因为您在生成的e.target的{{1}}事件中使用click，所以当您单击文本和{{1 }}单击蓝色条形时，div不会总是指向相同的元素。相反，您希望始终在span上调用div。这可以通过使用.nextElementSibling来完成，但是由于您还使用了箭头功能，.nextElementSibling绑定将无法正确引用接收事件的元素（div），因此如果您将其更改为使用匿名函数，然后this.nextElementSibling就可以使用。

this

div

this

没有分配点击处理程序的循环：

const addForm = document.querySelector(".add");
const list = document.querySelector(".section-list");
const expand = (element) => {
  let panel = element.nextElementSibling;
  if (panel.classList.contains("panel")) {
    panel.classList.toggle("active");
  }
};


// Template Generator Function
const getAccordionItem = (section) => {
  let html = `
      <div class="accordion" onclick="expand(this)">
                <span>${section}</span>
                <i class="fa fa-chevron-down"></i>
            </div>
            <div class="panel">
                <span>Hey there you did it! :-)</span>
            </div>
    `;
  return html;
};

// Add Section
addForm.addEventListener("submit",(e) => {
  e.preventDefault();
  const section = addForm.add.value.trim();
  if (section.length) {
      list.innerHTML += getAccordionItem(section);
    addForm.reset();
  }
});

body {
  margin: 50px 0;
  background-color: #f2f2f2;
  font-family: Arial,Helvetica,sans-serif;
}

.container {
  width: 960px;
  margin: auto;
}

.add-input {
  padding: 15px;
  border: 1px solid #dadada;
}

.add-btn {
  background: white;
  padding: 15px 25px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  cursor: pointer;
}

/* Accordian Panel */

.accordion {
  display: flex;
  justify-content: space-between;
  background: #03a9f4;
  color: white;
  padding: 15px;
  box-shadow: 0px 0px 4px 0px #dadada;
  cursor: pointer;
}

.panel {
  display: none;
  background-color: white;
  padding: 15px;
}

.active {
  display: block;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Dynamic Accordian</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div class="container">
    <!-- Add Section -->
    <form class="add">
      <input type="text" name="add" class="add-input">
      <button type="submit" class="add-btn">Add Section</button>
    </form>

    <!-- Section List -->
    <div class="section-list"></div>
  </div>

  <script src="app.js"></script>
</body>

</html>

accordion dom-events javascript

当我单击手风琴标题文本或人字形图标时，JavaScript手风琴不起作用

问题描述

解决方法

相关问答