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

Question

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

我正在检查触发器 div 旁边的内容 div 是否有 class 可见 — 如果不可见，请添加 class（这个有效）
但是如果前面的内容div有（包含）class是-可见的，我想去掉，所以只有一个内容div是open的一次。

我已经尝试了很多不同的条件，但我认为我过于复杂了，这应该很简单吧？

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
遍历所有触发器并删除 class is-visible 如果 href 标签的 ID 与单击的节点 ID 不匹配。 注意： 我必须向触发器 href 标签添加一个 ID 属性，例如 <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');
       }    
    }    
});
}

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

If Previous Content Div is Open, Close It and Open the Next (Plain JavaScript)

javascript

selectors-api