帶有文本按鈕 innerHTML 的手風琴

Question

我有一架手風琴，除了一個細節外，它基本上可以工作。 而不是通常的箭頭，它顯示手風琴是否關閉，我有文字 - “打開”。 我在 Pure JS 中使用 innerHTML 將其更改為“關閉”。 當我單擊要關閉的項目上的按鈕時，一切正常，但是當我單擊另一個項目時，我需要項目的 rest 將文本更改為“打開”，但這不會發生。 我的代碼在下面，這是codepen的鏈接 - https://codepen.io/leokoltm/pen/mdMvLoo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion</title>
</head>
<body>
 <div class="acc">
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>
   <div class="acc__item">
     <div class="acc__title">
        <h4>Title 1</h4>
        <button class="acc__button">Open</button>
      </div>
     <div class="acc__content">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
     </div>
   </div>
</body>
</html>

.acc__item {
  border: 1px solid navy;
}
.acc__title {
  display: flex;
  justify-content: space-between;
}

.acc__content {
  display: none;
}

.acc__button {
  background-color: none;
  width: 30%
}

.open .acc__content {
   display: block;
}


document.addEventListener("DOMContentLoaded", function(event) {

    const accordionItems = document.querySelectorAll('.acc__item');

    accordionItems.forEach((acc) => {
        const btns = acc.querySelectorAll('.acc__button')

        btns.forEach(btn => {

            btn.addEventListener("click", () => {

                if (acc.classList.contains('open') && btn.innerHTML !== "Open") {
                    btn.innerHTML = "Open";
                } else {
                    btn.innerHTML = "Close";
                }

                accordionItems.forEach((item) => {
                if (item !== acc) {
                    item.classList.remove("open");
                }
                });

                acc.classList.toggle("open");


            });

        });

    });






});

Answer 1

嘗試獲取 div 內的按鈕並像這樣更改文本

item.getElementsByTagName("button")[0].innerHTML = "Open";

演示如下：

 document.addEventListener("DOMContentLoaded", function(event) { debugger; const accordionItems = document.querySelectorAll('.acc__item'); accordionItems.forEach((acc) => { debugger; const btns = acc.querySelectorAll('.acc__button') btns.forEach(btn => { btn.addEventListener("click", () => { debugger; if (acc.classList.contains('open') && btn.innerHTML.== "Open") { btn;innerHTML = "Open". } else { btn;innerHTML = "Close". } accordionItems;forEach((item) => { if (item.== acc) { debugger. item;classList.remove("open"). //getting the button by tag name and updating it item;getElementsByTagName("button")[0];innerHTML = "Open". } }). acc;classList;toggle("open"); }); }); }); });

 .acc__item { border: 1px solid navy; }.acc__title { display: flex; justify-content: space-between; }.acc__content { display: none; }.acc__button { background-color: none; width: 30% }.open.acc__content { display: block; }

 <div class="acc"> <div class="acc__item"> <div class="acc__title"> <h4>Title 1</h4> <button class="acc__button">Open</button> </div> <div class="acc__content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium. </div> </div> <div class="acc__item"> <div class="acc__title"> <h4>Title 1</h4> <button class="acc__button">Open</button> </div> <div class="acc__content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium. </div> </div> <div class="acc__item"> <div class="acc__title"> <h4>Title 1</h4> <button class="acc__button">Open</button> </div> <div class="acc__content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium. </div> </div> <div class="acc__item"> <div class="acc__title"> <h4>Title 1</h4> <button class="acc__button">Open</button> </div> <div class="acc__content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium. </div> </div>

帶有文本按鈕 innerHTML 的手風琴

問題描述

1 個解決方案

解決方案1
1 已采納 2021-11-18 16:38:19

帶有文本按鈕 innerHTML 的手風琴

問題描述

1 個解決方案

解決方案1 1 已采納 2021-11-18 16:38:19

解決方案1
1 已采納 2021-11-18 16:38:19