我的带有 classList.toggle 的 javascript 代码不能正常工作

【问题标题】：my javascript code with classList.toggle doesn't work well我的带有 classList.toggle 的 javascript 代码不能正常工作
【发布时间】：2019-07-31 02:00:30
【问题描述】：

我制作了一个按钮，使我的 div 隐藏和可见。 一次或两次效果很好，但后来就不行了 （我单击带有 column1 的按钮 不打开第 1 列的隐藏 div 然后我点击 column2 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>

【问题讨论】：

• 你想对on类做什么？
• 每次单击
• 时，您都会在 上添加一个新的单击事件。在同一个
  上单击两次后，您将切换“隐藏”两次 => 这个
  没有变化。如果您单击另一个
  则下一个按钮单击仍会影响上一个
  更改您的逻辑，以便您的
上只有一个事件侦听器