slideToggle 状态不适用于多个框

Question

我正在尝试使用 cookie 保存可折叠框的切换状态。这是我的代码：

HTML:

<div class="box_container">
    <div class="box_handle">
        Title
    </div>
    <div class="box" data-title="admin_actions">
        Content
    </div>
</div>

Javascript:

$('div.box_container div.box_handle').click(function() {
    $(this).next('.box').slideToggle('fast');
});
$.each($('div.box_container div.box_handle'), function(index,value){
    if ($.cookie('show_box_' + $(value).next('.box').attr('data-title')) != 'closed'){
        $(value).next('.box[data-title="' + $('.box').attr('data-title') + '"]').hide();
    }
});
var new_value = "";
window.onbeforeunload = function() {
    $.each($('div.box_container div.box_handle'),function(index,value){
        new_value = ($(value).next('.box').css('display') == 'none') ? 'open' : 'closed';
        $.cookie('show_box_' + $(value).next('.box').attr('data-title'), new_value);
    });
}

现在，我的问题是：

除第一个以外的任何框都将始终打开。它确实为它设置了一个 cookie，但如果 cookie 设置为 closed 则不会隐藏它。仅适用于它工作的页面上的每个第一个框。我该如何解决这个问题？

Answer 1

使用javascript

的onbeforeunload功能

 window.onbeforeunload = function() {
      //Declare cookie to close state
 }

每次页面刷新都会调用此函数

更新：

要循环遍历每个值，请这样使用 $.each：

var new_value = "";
window.onbeforeunload = function() {
 $.each($('div.box_container div.box_handle'),function(index,value){
  new_value = ($(value).next('.box').css('display') == 'none') ? 'collapsed' : 'expanded';
  $.cookie('show_box' + '_' + $(value).next('.box').attr('data-title'), new_value);
 })
}

更新二：

这样做，它应该有效

window.onload = checkCon;
function checkCon(){
 $.each($('div.box_container div.box_handle'),function(index,value){
  if ($.cookie('show_box' + '_' + $(value).next('.box').attr('data-title')) != 'expanded'){
   $(value).next('.box[data-title="' + $(value).next('.box').attr('data-title') + '"]').hide();
  }
 })
}

slideToggle 状态不适用于多个框

slideToggle state not working with multiple boxes

javascript

cookies

jquery