Question

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

在javascript中使用alert我已经能够在点击之前和之后读取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

这是正常的，您可以在警报中看到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的值中添加名称，以便在重新加载时找到它。

此处数据无用，刷新页面时，数据不再存在。

Answer 2

您似乎要保存每个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;
}

Jquery菜单记住菜单的状态

2 个答案: