带文本按钮 innerHTML 的手风琴

Question

我有一个手风琴，除了一个细节外，基本上可以用。而不是显示手风琴是否关闭的通常箭头，我有文本 - “打开”。我在纯 JS 中使用 innerHTML 将其更改为“关闭”。当我单击要关闭的项目上的按钮时，一切正常，但是当我单击另一个项目时，我需要其余项目将文本更改为“打开”，但这不会发生。我的代码在下面，这是 link to the codepen

 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");
    
    
                });
    
            });
    
        });  
    });

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

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 的手风琴

Accordion with text button innerHTML

javascript

accordion