javascript - 尝试仅在 Accordion 菜单未激活时显示标题

Question

我已经解决这个问题好几天了，我知道这是一个简单的修复，但我就是无法解决!

现在，我的网站的标题已显示，但是一旦单击 Accordion 项目，标题就会隐藏，但我试图做到如果没有任何 Accordion 项目处于事件状态，则再次显示标题。

这是我到目前为止的代码:

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    $('.heading').hide(); 
    var active = document.querySelector(".accordion.active");
    if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    } 
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  } 

};

我只需要在没有任何事件时显示标题!谢谢!

Answer 1

我假设 accodion 一次打开一个选项卡。这意味着当您单击一个事件的时，它会关闭所有设置。如果这是真的，我们可以简单地检查何时单击事件元素，并在这种情况下显示“标题”

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    $('.heading').hide(); 
    var active = document.querySelector(".accordion.active");
if (active && active == this) {
      $('.heading').show(); 
    }     
if (active && active != this) {
      active.classList.remove("active");
      active.nextElementSibling.classList.remove("show");
    } 
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  } 

};