如何在頁面更改中保留Javascript狀態

Question

我設置了手風琴式導航列表，以便在單擊類別時打開顯示鏈接到頁面的子類別。

我想要做的是讓手風琴導航列表在打開新頁面時保持打開或關閉狀態。

我已經收集到了Cookie，以保持刷新狀態，但是如何在訪問不同頁面時保持狀態？所有頁面都有相同的手風琴導航列表。

Answer 1

我找到了一個解決方案，它採用了手風琴插件這裏找到，http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi和jQuery的cookie.js插件

我添加的ID在HTNL加價，像這樣的標題錨每日新聞，

<li> 
     <a id="m1" class="label" href="#">Sound/Audio Systems</a> 
     <ul class="acitem"> 
      <li><a href="products.php?sub_cat=PA_Systems">PA Systems</a></li> 
      <li><a href="#">Loudspeakers</a></li> 
      <li><a href="#">Microphones </a></li> 
      <li><a href="#">DJ Equipment</a></li> 
      <li><a href="#">Sound Processing Equipment</a></li> 
     </ul> 
    </li> 

並修改了accordian.js代碼，我添加了以$ .cookie開頭的行和document.ready函數中的If語句。

jQuery.fn.initMenu = function() { 
return this.each(function(){ 
    var theMenu = $(this).get(0); 
    $('.acitem', this).hide(); 
    $('li.expand > .acitem', this).show(); 
    $('li.expand > .acitem', this).prev().addClass('active'), 
    currentID = ""; 
    $('li a', this).click(
     function(e) { 
      e.stopImmediatePropagation(); 
      var theElement = $(this).next(); 
      var parent = this.parentNode.parentNode; 
      if($(parent).hasClass('noaccordion')) { 
       if(theElement[0] === undefined) { 
        window.location.href = this.href; 
       } 
       $(theElement).slideToggle('normal', function() { 
        if ($(this).is(':visible')) { 
         $(this).prev().addClass('active'); 
         currentID = $(this).prev().attr('id'); 
         $.cookie('menustate', currentID, {expires: 2, path: '/'}); 
        } 
        else { 
         $(this).prev().removeClass('active'); 
         $.cookie('menustate', null, {expires: 2, path: '/'}); 
        }  
       }); 
       return false; 
      } 
      else { 
       if(theElement.hasClass('acitem') && theElement.is(':visible')) { 
        if($(parent).hasClass('collapsible')) { 
         $('.acitem:visible', parent).first().slideUp('normal', 
         function() { 
          $(this).prev().removeClass('active'); 
          $.cookie('menustate', null, {expires: 2, path: '/'}); 
         } 
        ); 
        return false; 
       } 
       return false; 
      } 
      if(theElement.hasClass('acitem') && !theElement.is(':visible')) {   
       $('.acitem:visible', parent).first().slideUp('normal', function() { 
        $(this).prev().removeClass('active'); 
        $.cookie('menustate', null, {expires: 2, path: '/'}); 
       }); 
       theElement.slideDown('normal', function() { 
        $(this).prev().addClass('active'); 
        currentID = $(this).prev().attr('id'); 
        $.cookie('menustate', currentID, {expires: 2, path: '/'}); 
        }); 
        return false; 
       } 
      } 
     } 
    ); 
}); 

}; 



$(document).ready(function() { 
$('.menu').initMenu();$('#side-navigation_frame').show(); 
if ($.cookie('menustate')) { 
    var anchor = "", 
     elementID = $.cookie('menustate'); 
    anchor = document.getElementById(elementID); 
    $(anchor).addClass('active'); 
    $(anchor).next().show(); 

} 
}); 

它工作很好，對初學者不壞，感謝所有的建議。

羅布·芬威克

Answer 2

Cookie在指定完整路徑和域時保留「保留狀態」。所以，如果你能讓他們只爲一頁工作，你應該讓他們在你網站的所有頁面上自動工作。

Answer 3

嘗試Web Storage。將頁面卸載狀態存儲在頁面上，恢復頁面加載事件的狀態。

Answer 4

你仍然可以使用cookies，你只需要確保它們不是特定於一個頁面。例如：

document.cookie = 'openitem=5; expires=somedate; path=/'; 

將可供網站上的所有頁面訪問。 More about cookies.

Answer 5

好的，我看了一下你正在使用的庫，它是一個體面的庫，但你可能會發現如果你使用像jQuery UI這樣更標準的庫更容易找到你的問題的解決方案，它有一個手風琴控制http://jqueryui.com/demos/accordion/，就像我提到的那樣，有很多人使用它，可以找到大多數問題的答案。

但就像我剛纔提到的，我確實看了一下你的圖書館。正如其他人所提到的，您將使用cookie來存儲該值。這個庫支持'預擴展'手風琴的一個特定部分，這樣做可以將擴展類添加到元素中。您可以執行該服務器端，也可以在調用initMenu（）之前使用JavaScript來完成此操作。

另一個較不優雅的選項是在調用initMenu後觸發錨標籤上的click事件。最後，你可以使用jQuery的show（）來展示沒有動畫的部分。

您需要做的第一件事是找出哪個部分被點擊，然後您將該部分名稱存儲在cookie中。在頁面加載時，您將獲得該值並展開適當的相應部分。這是代碼應該看起來像 - 注意這是僞代碼，並且您已填寫適當的部分。

$(function() { 
    $(".menu.collapsible .label").click(function() { 
     var accordianSection = $(this).text(); 
     rememberSection(accordianSection); 
    }); 

    var section = recallSection(); 
    if(section !== undefined) { 
     expandSection(section); 
    } 
}); 

的expandSection功能可以是這個樣子：

var sectionLink = $(".menu.collapsible .label").filter(function() { 
    return $(this).text() == section; 
}); 
sectionLink.trigger('click');