Bootstrap手風琴。保留頁面加載多個面板的狀態

我在表單頁面上使用引導手風琴。用戶可以同時打開多個面板。提交表格後，我想保留已打開的任何Bootstrap手風琴面板的狀態。Bootstrap手風琴。保留頁面加載多個面板的狀態

我已經修改一些代碼，我在堆棧溢出發現做到這一點使用本地存儲，如下：

Accordion HTML 
------------------- 

<div class="panel-group" id="accordion"> 

    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title"> <a data-toggle="collapse" href="#client_12325">Panel heading</a> </div> 
    </div> 
    <div id="client_12325" class="panel-collapse collapse"> 
     <div class="panel-body">Panel Content</div> 
    </div> 
    </div> 

    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title"> <a data-toggle="collapse" href="#client_12326">Panel heading</a> </div> 
    </div> 
    <div id="client_12326" class="panel-collapse collapse"> 
     <div class="panel-body">Panel Content</div> 
    </div> 
    </div> 

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title"> <a data-toggle="collapse" href="#client_12327">Panel heading</a> </div> 
    </div> 
    <div id="client_12327" class="panel-collapse collapse"> 
     <div class="panel-body">Panel Content</div> 
    </div> 
    </div> 

</div> 

Javascript 
--------------- 

<script> 
$(document).ready(function() { 

    var retainState = []; 
    localStorage.setItem('retainState', JSON.stringify(retainState)); 

    $('#accordion').on('shown.bs.collapse', '.panel-collapse', function() { 
     retainState = JSON.parse(localStorage.getItem('retainState')); 
     if ($.inArray($(this).attr('id'), retainState) == -1) { 
      retainState.push($(this).attr('id')); 
     }; 
     localStorage.setItem('retainState', JSON.stringify(retainState)); 
    }); 

    $('#accordion').on('hidden.bs.collapse', '.panel-collapse', function() { 
     retainState = JSON.parse(localStorage.getItem('retainState')); 
     retainState.splice($.inArray($(this).attr('id'), retainState), 1 ); //remove item from array 
     localStorage.setItem('retainState', JSON.stringify(retainState)); 
    }); 

}); 


var retainStateArray = JSON.parse(localStorage.getItem('retainState')); 
var arrayLength = retainStateArray.length; 
for (var i = 0; i < arrayLength; i++) { 
    var panel = '#'+retainStateArray[i]; 
    $(panel).addClass('in'); 
    console.log(panel); 
} 
</script>

有2個問題與此代碼

1 /它得到正確的ID頁面刷新上的面板（可以通過循環內的控制檯日誌查看），但是無法將類'in'添加到面板。

2 /它只保留第一頁重新加載的狀態。無論頁面重新加載多少次，我都希望它保留整個用戶會話的狀態。

在此先感謝。

來源

2016-02-07 ratherBeKiting

在您的代碼上，當DOM準備就緒時，它將始終將localstorage設置爲空數組，因爲您將空數組分配給retainState。

你可以做的是先檢查localstorage是否存在，然後將其分配給retainState。

來源

2016-02-07 14:47:45

謝謝。這就是我最終做的 – ratherBeKiting

爲什麼不使用js-cookies如果你不反對添加額外的js庫。

當點擊提交按鈕時，創建一個具有選擇'in'類的ID的cookie。

如果cookie不存在
觀察到默認的手風琴狀態。

如果cookie不存在
測試，如果「#accordion」
當前網頁上不存在從cookie
取該ID的解析DOM的ID的
應用類「中的」

贏？

來源

2016-02-07 15:44:20

非常感謝，我不反對cookies，這是一個好主意。在閱讀您的評論之前，我設法讓我的代碼正常工作。 – ratherBeKiting

沒問題，我很高興你能按照你想要的方式工作:) –

管理得到這個工作。我確信這段代碼可能會更漂亮

來源

2016-02-07 23:11:07 ratherBeKiting

Bootstrap手風琴。保留頁面加載多個面板的狀態

回答

相關問題