基础 jQuery 手风琴渲染为在页面加载时打开

Question

我在我的网页上使用带有 Foundation 的 jQuery 手风琴。

当我第一次访问该页面时，手风琴呈现为应有的关闭状态。

但是，如果我打开手风琴，离开页面，然后返回页面，页面加载的瞬间，你可以看到手风琴打开，然后 jQuery 启动，你可以看到它关闭。

这非常令人沮丧，我无法找到任何好的理由或例子来说明为什么会发生这种情况。

我使用的是 Rails 4，但我不知道这是否是 turbolinks、我的 jQuery 手风琴功能或它如何呈现缓存网页的问题。

我用于手风琴的 jQuery 函数是：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

谁能帮助解决这个问题？

Answer 1

这可能是由于页面缓存或类设置为错误的默认值。

确保在 css / html 文件中元素未处于活动状态，这样当页面加载时它们就会被关闭。

如果是缓存问题，您可以编写一个要执行的函数，如下所示：

window.onbeforeunload = function() {
    var i = acc.length;
    while (i--) acc[i].classList.toggle("closed") // I don't know the class for closed, I'm guessing.
}