我的带有classList.toggle的JavaScript代码无法正常工作

Question

我做了一个按钮，使我的div隐藏并可见。 它可以运行一到两次，但随后效果不佳 （我点击带有column1的按钮 不会打开列1的隐藏div 然后我点击列2 column2的隐藏div正在打开。...）

对不起，我的英语不好，但我真的想知道为什么?

var tabList = document.querySelectorAll("li");

tabList.forEach(function(tab, index) {
  tab.addEventListener('click', function() {
    removeOther();
    tab.classList.toggle("on");
    btnEvent(tab);
  });
});

function removeOther() {
  for (var i = 0; i < tabList.length; i++) {
    if (tabList[i].classList.contains("on")) {
      tabList[i].classList.remove("on");
    }
  }
}

var btn = document.getElementsByTagName("button")[0];

function btnEvent(tab) {
  var hiddenTabs = tab.querySelectorAll('.hidden');
  btn.addEventListener("click", function() {
    for (var i = 0; i < hiddenTabs.length; i++) {
      hiddenTabs[i].classList.toggle("hidden");
    }
  })
}

div {
  background: salmon;
  width: 50px;
  height: 50px;
  margin: 5px;
  display: none;
}

div.hidden,
li.on div.hidden {
  display: none;
}

li.on div {
  display: block;
}

<ul>
  <li class="on">column1
    <div>box</div>
    <div>box</div>
    <div>box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
  </li>
  <li>column2
    <div>box</div>
    <div>box</div>
    <div>box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
  </li>
  <li>column3
    <div>box</div>
    <div>box</div>
    <div>box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
  </li>
</ul>
<button>click!</button>

Answer 1

请查看以下JS代码片段

var tabList = document.querySelectorAll("li");

// move btn selector to the top of the script part 
var btn = document.getElementsByTagName("button")[0];

tabList.forEach(function(tab, index) {
  tab.addEventListener('click', function() {
    removeOther();
    tab.classList.toggle("on");
    btnEvent(tab);
  });

  // initially run the click event on the first tab element
  if (index < 1) tab.click();
});

function removeOther() {
  for (var i = 0; i < tabList.length; i++) {
    if (tabList[i].classList.contains("on")) {
      tabList[i].classList.remove("on");
    }
  }
}

function btnEvent(tab) {

  // add .not-hidden, to mark .hidden elements, 
  var hiddenTabs = tab.querySelectorAll('.hidden,.not-hidden');

  // should be applied as onclick attribute
  // addEventListener adds a new Event at each time
  btn.onclick = function() {
    for (var i = 0; i < hiddenTabs.length; i++) {
      hiddenTabs[i].classList.toggle("hidden");

      // toggle element class to .not-hidden while it is not hidden
      hiddenTabs[i].classList.toggle("not-hidden");
    }
  }
}

div {
  background: salmon;
  width: 50px;
  height: 50px;
  margin: 5px;
  display: none;
}

div.hidden,
li.on div.hidden {
  display: none;
}

li.on div {
  display: block;
}

<ul>
  <li class="on">column1
    <div>box</div>
    <div>box</div>
    <div>box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
  </li>
  <li>column2
    <div>box</div>
    <div>box</div>
    <div>box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
  </li>
  <li>column3
    <div>box</div>
    <div>box</div>
    <div>box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
    <div class="hidden">box</div>
  </li>
</ul>
<button>click!</button>