Question

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

我正在检查触发器div旁边的内容div是否有类可见 - 如果没有，请添加该类（这可行）
但是如果前面的内容div有（包含）类是可见的，我想删除它，所以一次只打开一个内容div。

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

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

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

如果Previous Content Div已打开，请将其关闭并打开下一个（纯JavaScript）

1 个答案: