如何在切換到新頁面時保留jQuery切換狀態

Question

我想要完成的事情似乎很簡單，但我一直無法弄清楚如何實現此功能。

我有一個jQuery切換效果應用於一個稱爲「快速Brew選擇器」的導航元素。它基本上是不同啤酒製造商的快速視覺導航。請在此行動中看到這一點：http://srperrott.silverjerk.com/products/domestic/millercoors

我想這爲保持關閉，當你第一次進入啤酒頁面，但我覺得過渡到下一個頁面是有點刺耳，因爲我有被應用於一些jQuery效果到頁面上的某些元素來激活體驗。將此與Quick Brew Selector的崩潰結合起來，我覺得這樣的體驗過於生澀，或者不夠流暢（難以溝通我發現錯誤的地方，但我感覺如果選擇器仍然處於打開狀態下一頁這將解決問題）。

我正在使用一個簡單的jQuery切換從brew選擇器獲得我想要的功能。在打開的選擇器加載下一頁的代碼中，需要更改哪些內容？這裏是我的代碼迄今（我在jQuery的非常差，所以請去容易對我！）

$(document).ready(function(){ 
    $(".quick-brew-header").toggle(function(){ 
    $(".zone-preface-wrapper").animate({height:165},40); 
    },function(){ 
    $(".zone-preface-wrapper").animate({height:40},40); 
}); 

Answer 1

如果你想有一個向後兼容的解決方案，你可以在可用並且在Cookie存儲在localStorage的狀態除此以外。如果您不想使用cookie，則可以在菜單中的每個鏈接上的散列片段中追加標題狀態，然後在加載下一頁時從document.location.href讀取狀態。我爲下面的localStorage/cookie版本編寫了一些代碼。不過，在某些方面，我認爲散列片段解決方案可能會更好（即使它使鏈接URL更醜），因爲如果有人使用您的啤酒選擇器，然後在一小時後回到頁面，也許您不想要當時自動擴展標題。

$(document).ready(function(){ 

    function store_toggle_state(state) { 
    if (typeof(Storage) !== "undefined") { 
     localStorage["quick-brew-header"] = state; 
    } else { 
     // No localStorage, so use a cookie 
     // Alternatively, you could store in URL 
     // $.map($(".quick-brew-container a"), function (link) { 
     // $(link).attr("href", $(link).attr("href").split("#")[0] + "#" + state; 
     // }); 
     document.cookie = "quick-brew-header=" + state; 
    } 
    } 

    function get_toggle_state() { 
    var state = false; 

    if (typeof(Storage) !== "undefined") { 
     if ("quick-brew-header" in localStorage) { 
     state = localStorage["quick-brew-header"]; 
     } 
    } else { 
     // Alternatively, read state from document.location.href if it's there 
     var cookies = document.cookie.split("; "); 
     $.map($.makeArray(cookies), function (cookie_str) { 
     var cookie = cookie_str.split("="); 
     if (cookie[0] == "quick-brew-header") { 
      state = cookie[1]; 
     } 
     }); 
    } 

    if (state === "true" || state === "false") { 
     state = (state === "true"); 
    } 
    return state; 
    } 

    function header_off() { 
    store_toggle_state(false); 
    $(".zone-preface-wrapper").animate({height:40},40); 
    } 

    function header_on() { 
    store_toggle_state(true); 
    $(".zone-preface-wrapper").animate({height:165}, 40); 
    } 

    var show_at_load = get_toggle_state(); 
    if (show_at_load) { 
    header_on(); 
    } else { 
    header_off(); 
    } 
    // What happens on even/odd clicks depends on if we showed the header at page load 
    $(".quick-brew-header").toggle(show_at_load ? header_off : header_on, 
           show_at_load ? header_on : header_off);  
});