如果上一个内容Div已打开，请关闭它并打开下一个（普通JavaScript）

Question

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

1. 我正在检查触发器div旁边的内容div是否具有可见的类-如果不是，则添加该类（可行）

2. 但是，如果以前的内容div的（包含）类是可见的，那么我想将其删除，因此一次只打开一个内容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

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

• 切换类在单击的节点上is-visible
• 遍历所有触发器，如果href标记的ID与单击的节点ID不匹配，则删除该类is-visible的。 注意：我必须将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'); } } }); }