Javascript手风琴更改img取决于它是打开还是关闭

问题描述

我有以下问题。我想创建手风琴，我希望它改变箭头取决于箭头是打开还是关闭，不幸的是我总是收到错误

** script.js:94 Uncaught TypeError: 无法读取属性 'addEventListener' of null at** 然后点击 ** 未捕获的类型错误：无法读取 HTMLButtonElement 处未定义的属性“样式”。 **

let acc = document.getElementsByClassName("accordion");
let i;
let arrowDown = document.getElementsByClassName("arrow-down");
let arrowUp = document.getElementsByClassName("arrow-up");


for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click",function() {
    this.classList.toggle("active");
    let panel = this.nextElementSibling;

    if (panel.style.display === "none") {
      panel.style.display = "block";
      acc.firstChild.style.display ="block";
      acc.childNodes[1].style.display = "none";

    } else {
      panel.style.display = "none";
      acc.firstChild.style.display ="none";
      acc.childNodes[1].style.display = "block";
    }
  });
}

当我点击手风琴打开和关闭时效果很好，但它不会改变 img

这里是 html

<button class="accordion">Detailed info <span>
                <svg class="arrow-down" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 7H16V9H0V7Z" fill="#5E636A"/>
                    <path d="M9 8.74224e-08L9 16H7L7 0L9 8.74224e-08Z" fill="#5E636A"/>
                </svg>
                    

                <svg class="arrow-up" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0H16V2H0V0Z" fill="#E0672E"/>
                </svg>
                     
                </span>
            </button>      
            <div class="panel">
                <h5>Vestibulum tellus urna,porta eu mi in,tincidunt ullamcorper nulla. Curabitur finibus ipsum a ex u ltricies porttitor in vitae sem. </h5>
                <p> Suspendisse sit amet nisl vel orci efficitur luctus. Curabitur ac risus viverra,egestas felis in,congue libero. Etiam fermentum,magna eget pellentesque vehicula,libero turpis vulputate nulla,at porttitor erat tellus sed risus. Nulla facilisi. In hac habitasse platea dictumst. Sed at pulvinar libero. Pellentesque consequat ultricies imperdiet.</p>
            </div>

            <button class="accordion">Size chart<span>
                <svg class="arrow-down" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 7H16V9H0V7Z" fill="#5E636A"/>
                    <path d="M9 8.74224e-08L9 16H7L7 0L9 8.74224e-08Z" fill="#5E636A"/>
                </svg>
                    

                <svg class="arrow-up" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0H16V2H0V0Z" fill="#E0672E"/>
                </svg>
                     
                </span>
            </button>      
            <div class="panel">
                <h5>Vestibulum tellus urna,at porttitor erat tellus sed risus. Nulla facilisi. In hac habitasse platea dictumst. Sed at pulvinar libero. Pellentesque consequat ultricies imperdiet.</p>
            </div>

解决方法

以下是处理显示箭头和内容的方法。 您实际上可以在点击按钮时通过 this 访问它们。因此，您实际上可以通过 NodeList 获得箭头。在这种情况下，最好使用 document.getElementsByClassName 而不是 .accordion 的 document.querySelectorAll 按钮。 我希望这可以帮助您解决问题。

var acc = document.getElementsByClassName("accordion");
var i;
   let arrowDown = document.getElementsByClassName("arrow-down");
            let arrowUp = document.querySelectorAll(".arrow-up");

            for(let a= 0; a< arrowUp.length; a++){
             arrowUp[a].style.display="none";
            }
            


for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click",function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
        this.children[0].childNodes[1].style.display="inline";
                 this.children[0].childNodes[3].style.display="none";
    } else {
      panel.style.display = "block";
       this.children[0].childNodes[3].style.display="inline";
                this.children[0].childNodes[1].style.display="none";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,.accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display:none;
  background-color: white;
  overflow: hidden;
}

<button class="accordion">Detailed info <span>
         <svg class="arrow-down" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 7H16V9H0V7Z" fill="#5E636A"/>
                                <path d="M9 8.74224e-08L9 16H7L7 0L9 8.74224e-08Z" fill="#5E636A"/></svg>
                            <svg class="arrow-up" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 0H16V2H0V0Z" fill="#E0672E"/>
                            </svg>
                            </span>
              </button>  

                
                       

             <div class="panel">
                  <h5>Vestibulum tellus urna,porta eu mi in,tincidunt ullamcorper nulla. Curabitur finibus ipsum a ex u ltricies porttitor in vitae sem. </h5>
                  <p> Suspendisse sit amet nisl vel orci efficitur luctus. Curabitur ac risus viverra,egestas felis in,congue libero. Etiam fermentum,magna eget pellentesque vehicula,libero turpis vulputate nulla,at porttitor erat tellus sed risus. Nulla facilisi. In hac habitasse platea dictumst. Sed at pulvinar libero. Pellentesque consequat ultricies imperdiet.</p>
              </div>

                       

                 <button class="accordion">Size chart
                    <span>
                      <svg class="arrow-down" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 7H16V9H0V7Z" fill="#5E636A"/>
                                    <path d="M9 8.74224e-08L9 16H7L7 0L9 8.74224e-08Z" fill="#5E636A"/>
                                </svg>
                                <svg class="arrow-up" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 0H16V2H0V0Z" fill="#E0672E"/>
                                </svg>
                      </span>
                 </button>   

               
                            <div class="panel">
                                <h5>Vestibulum tellus urna,tincidunt ullamcorper nulla. Curabitur finibus ipsum a ex u ltricies porttitor in vitae sem. </h5>
                                <p> Suspendisse sit amet nisl vel orci efficitur luctus. Curabitur ac risus viverra,at porttitor erat tellus sed risus. Nulla facilisi. In hac habitasse platea dictumst. Sed at pulvinar libero. Pellentesque consequat ultricies imperdiet.</p>
                            </div>