Question

我有一个使用手风琴方法的移动菜单，但是当我打开一个按钮时，只要再次单击同一按钮，它们就会关闭，但是我想始终关闭然后再打开一个新按钮。

var acc = document.getElementsByClassName("sidr-class-accordion");
var i;

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";
    } else {
      panel.style.display = "block";
    }
  });
}

<button class="accordion">Compra Sortida</button>
<div class="panel">
  <p>
    <a href="produtos/index/categoria/venda-unitaria/subcategoria/camisetas-algodao">Camisetas Algodão</a>
  </p>
</div>
<button class="accordion">Compra Unitária</button>
<div class="panel">
  <p>
    <a href="produtos/index/categoria/venda-unitaria/subcategoria/camisetas-venda">Camisetas Algodão</a>
  </p>
</div>

Answer 1

主要问题似乎是sidr-class-accordion类未在HTML中定义。

编写此手风琴菜单脚本的另一种方法（允许您保留当前的HTML结构）如下：

/* Store list of accordion buttons and panels for later use */
const buttons = Array.from(document.querySelectorAll(".accordion"));
const panels = Array.from(document.querySelectorAll(".panel"));

/* Iterate each accordion button where click event on each will be defined  */
for (const button of buttons) {

  button.addEventListener("click", function(event) {

    /* Derive index of clicked button based on poisiton in the buttons array */
    const index = buttons.indexOf(button);

    for (const panel of panels) {
      if (panel === panels[index]) {

        /* If panel matches panel of clicked button then toggle vibility */
        panel.classList.toggle("visible");
      } else {

        /* Otherwise hide the panel */
        panel.classList.remove("visible");
      }
    }

  });
}

.panel {
  display:none;
}

.visible {
  display:block;
}

button {
  display: block;
}

<button class="accordion">Compra Sortida 1</button>
<div class="panel">
  <p>
    <a href="produtos/index/categoria/venda-unitaria/subcategoria/camisetas-algodao">Camisetas Algodão 1</a>
  </p>
</div>
<button class="accordion">Compra Unitária 2</button>
<div class="panel">
  <p>
    <a href="produtos/index/categoria/venda-unitaria/subcategoria/camisetas-venda">Camisetas Algodão 2</a>
  </p>
</div>

打开另一个按钮时折叠菜单

1 个答案: