javascript - 如果上一个内容 Div 已打开，请将其关闭并打开下一个(纯 JavaScript)

Question

我有一个简单的下拉常见问题解答系统，我只想一次打开一个内容 div，所以我尝试使用 if/else 条件，但我只能让它工作一半。

1. 我正在检查触发器 div 旁边的内容 div 是否具有可见类 - 如果没有，则添加该类(这有效)

2. 但是如果前一个内容 div 具有(包含)类 is-visible，我想将其删除，因此一次只能打开一个内容 div。

我尝试了很多不同的条件，但我认为我把它弄得太复杂了，这应该足够简单吧？

https://jsfiddle.net/notuhm05/1/

var faqTrigger = document.querySelectorAll('.mm-faq-trigger');
for (var i = 0; i < faqTrigger.length; i++) {
    faqTrigger[i].addEventListener('click', function() {
      if (!this.nextElementSibling.classList.contains('is-visible')) {
        this.nextElementSibling.classList.add('is-visible');
      } else if (this.previousElementSibling.classList.contains('is-visible')) {
        this.nextElementSibling.classList.remove('is-visible');
      } else {
        console.log("doesn't work");
      }
    });
}

非常感谢这里的一些指点! :-)

Answer 1

这是一个可行的解决方案:

• 切换类(class) is-visible在单击的节点上
• 迭代所有触发器并删除类 is-visible如果href的id标签与单击的节点 ID 不匹配。 注意:我必须向触发器添加一个 id 属性 href标签如 <a id="1" href="#" class="mm-faq-trigger">Trigger</a>

• 源代码:

  var faqTrigger = document.querySelectorAll('.mm-faq-trigger');
  for (var i = 0; i < faqTrigger.length; i++) {
      faqTrigger[i].addEventListener('click', function() {
      this.nextElementSibling.classList.toggle('is-visible');
  
      for (var i = 0; i < faqTrigger.length; i++) {
          var trigger = faqTrigger[i];
          if (trigger.nextElementSibling !== null && trigger.id !== this.id)  {
              trigger.nextElementSibling.classList.remove('is-visible');
         }    
      }    
  });
  }