javascript - Javascript Accordion 更改 img 取决于它是打开还是关闭

Question

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

** script.js:94 Uncaught TypeError：无法读取属性'addEventListener'的null at**然后点击** Uncaught TypeError：无法读取属性'style'的未定义在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, 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>

标签： javascriptaccordion

Answer 1

以下是如何处理显示箭头和内容的处理。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, 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>