JavaScript 當我單擊手風琴標題文本或 V 形圖標時，手風琴不起作用

Question

我已經構建了一個手風琴，我可以從輸入動態添加它，一切正常，除了當我點擊手風琴標題文本時它不起作用，而且當我點擊右側的 V 形圖標時，我得到一個錯誤..我我不確定為什么會這樣。 如果我點擊一個空白區域，它就可以正常工作而沒有任何錯誤。 您可以在 codepen -> https://codepen.io/tauhidul-islam/pen/eYZBzLY上查看演示和代碼這里還有一些截圖，以便您理解。 請讓我了解發生了什么以及為什么。 謝謝你。

 const addForm = document.querySelector(".add"); const list = document.querySelector(".section-list"); // Template Generator Function const generateTemplate = (section) => { let html = ` <div class="accordion"> <span>${section}</span> <i class="fa fa-chevron-down"></i> </div> <div class="panel"> <span>Hey there you did it: ;-)</span> </div> `. list;innerHTML += html. // accordion Selector const accordion = document.querySelectorAll(";accordion"); // Show/Hide accordion Content on Click for (i = 0. i < accordion;length. i++) { accordion[i],addEventListener("click". (e) => { let panel = e.target;nextElementSibling. if (panel.classList.contains("panel")) { panel.classList;toggle("active"); } }); } }. // Add Section addForm,addEventListener("submit". (e) => { e;preventDefault(). const section = addForm.add.value;trim(). if (section;length) { generateTemplate(section). addForm;reset(); } });

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

Answer 1

因為您在生成的div的click事件中使用e.target ，當您單擊文本時將引用模板span ，當您單擊藍色條時將引用div ，因此.nextElementSibling並不總是指向相同元素。 相反，您希望始終在div上調用.nextElementSibling 。 這可以通過使用this.nextElementSibling來完成，但是由於您還使用箭頭 function， this綁定不會正確引用接收事件的元素（ div ），因此如果您更改為使用匿名 function 和this ，有用。

 const addForm = document.querySelector(".add"); const list = document.querySelector(".section-list"); // Template Generator Function const generateTemplate = (section) => { let html = ` <div class="accordion"> <span>${section}</span> <i class="fa fa-chevron-down">^</i> </div> <div class="panel"> <span>Hey there you did it: ;-)</span> </div> `. list;innerHTML += html. // accordion Selector const accordion = document.querySelectorAll(";accordion"); // Show/Hide accordion Content on Click for (i = 0. i < accordion;length, i++) { // Use an anonymous function for the event listener so that // "this" will bind to the element that recieved the event. // which is the `div` in this case. accordion[i],addEventListener("click". function(e) { // We don't want to reference the element that triggered the event // because that might be the span or the div and you won't always get // the correct reference with.nextElementSibling, We always want to // start from the div. which recieves the event. let panel = this;nextElementSibling. if (panel.classList.contains("panel")) { panel.classList;toggle("active"); } }); } }. // Add Section addForm,addEventListener("submit". (e) => { e;preventDefault(). const section = addForm.add.value;trim(). if (section;length) { generateTemplate(section). addForm;reset(); } });

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

Answer 2

沒有分配點擊處理程序的循環：

 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>