如何在切换到新页面时保留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);  
});