Question

我想要完成的事情似乎很简单，但我无法弄清楚如何实现这一功能。

我将jQuery切换效果应用于名为“Quick Brew Selector”的导航元素。它本质上是针对不同啤酒制造商的快速视觉导航。请在此处查看此操作：http://srperrott.silverjerk.com/products/domestic/millercoors

我希望在您第一次进入啤酒页面时保持关闭状态，但我觉得转换到下一页有点刺耳，因为我有一些jQuery效果应用于页面上的某些元素以活跃起来经验。再加上Quick Brew选择器的崩溃，我觉得这种体验太生涩了，或者说不够平滑（很难沟通我发现的错误，但我觉得如果选择器保持打开状态下一页这将解决问题）。

我正在使用简单的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

如果您需要向后兼容的解决方案，则可以在可用时将状态存储在localStorage中，否则存储在cookie中。如果您不想使用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);     
});

如何在切换到新页面时保留jQuery切换状态

1 个答案: