在頁面加載時打開的基礎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.
}