Jquery Menu 记住菜单的状态

Question

我正在尝试让我的菜单系统读取一个 cookie，以便它可以记住菜单状态。一旦记住，菜单将根据 cookie 保持打开/关闭。

在 javascript 中使用警报我能够在点击之前和之后读取 cookie，但遗憾的是我无法正确获取 if 语句以保持打开/关闭隐藏的 html。

非常感谢任何帮助！

代码如下：

HTML

<li class="primary"><a href="user/me">My Profile</a></li>
    <div class="menu_content">
        <ul>
            <li class="secondary"><a href="<?php print base_path() ?>user/my-education">My Education History</a></li>
            <li class="secondary"><a href="<?php print base_path() ?>user/my-achievements">My Achievements</a>
                <ul>
                    <li><a href="user/school">School</a></li>
                    <li><a href="user/my-achievements/year1">Year 1</a></li>

                </ul>
            </li>
            <li class="secondary"><a href="user/my-details">My Account Details</a></li>
            <li class="secondary"><a href="user/my-settings">My Account Settings</a></li>
        </ul>
    </div>
    <li class="primary"><a href="compare">Compare</a></li>
    <div class="menu_content">
        <ul>
            <li class="secondary"><a href="user/my-scores">My Scores</a></li>
        </ul>
    </div>

jQuery

  var state = $.cookie("panelState");

        $("li.primary").click(function(){

        if($.cookie("panelState") == "expanded") {
            $(this).next().slideToggle('300');          
            $(this).removeClass("open");
            $(this).cookie("panelState", "collapsed");
            alert($.cookie("panelState"));
        } else if ($.cookie("panelState") == "collapsed") {
            $(this).next().slideToggle('300');
            $(this).addClass("open");
            $(this).cookie("panelState", "expanded");
            alert($.cookie("panelState"));
            }
        });

Answer 1

您似乎想保存每个li.primary... 的状态，但使用$(this).cookie() 将不起作用。因此，最简单的解决方案是为每个标头添加一个 id（我在此演示中添加了 m1 和 m2）并在扩展时将其保存到 cookie 中。

试试这个 (demo)

$(document).ready(function(){

 var cookie = $.cookie("panelState"),
  expanded = cookie ? cookie.split("|").getUnique() : [],
  cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date

 // Remember content that was expanded
 $.each( expanded, function(){
  $('#' + this).show();
 })

 $('li.primary').click(function(){
  $(this).toggleClass("open");
  $(this).next().slideToggle('300', function(){
   updateCookie(this);
  });
 })

 // Update the Cookie
 function updateCookie(el){
  var indx = el.id;
  var tmp = expanded.getUnique();
  if ($(el).is(':hidden')) {
   // remove element id from the list
   tmp.splice( tmp.indexOf(el.id) , 1);
  } else {
   // add id of header to expanded list
   tmp.push(el.id);
  }
  expanded = tmp.getUnique();
  $.cookie("panelState", expanded.join('|'), { expires: cookieExpires } );
 }
});

// Return a unique array.
Array.prototype.getUnique = function(sort){
 var u = {}, a = [], i, l = this.length;
 for(i = 0; i < l; ++i){
  if(this[i] in u) { continue; }
  a.push(this[i]);
  u[this[i]] = 1;
 }
 return (sort) ? a.sort() : a;
}

Answer 2

这是正常的，您可以在警报中看到 cookie 的值并且 if 语句不起作用。

我喜欢你使用这个插件：http://plugins.jquery.com/files/jquery.cookie.js.txt

要设置 cookie，您需要使用 jQuery 上下文 ($.cookie()) 而不是 DOMElement ($(this).cookie())

新代码将是：

var state = $.cookie("panelState");

$("li.primary").click(function(){

if($.cookie("panelState") == "expanded") {
    $(this).next().slideToggle('300');          
    $(this).removeClass("open");
    $.cookie("panelState", "collapsed");
    alert($.cookie("panelState"));
} else if ($.cookie("panelState") == "collapsed") {
    $(this).next().slideToggle('300');
    $(this).addClass("open");
    $.cookie("panelState", "expanded");
    alert($.cookie("panelState"));
    }
});

如果您需要区分您的菜单，在您的 cookie 的值中，添加名称以便在重新加载时找到它。

这里数据没用，刷新页面时，数据就没有了。