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() не будет работать. Поэтому самым простым решением было бы добавить идентификатор для каждого заголовка (я добавил m1 и m2 в этой демонстрации) и сохранить его в файле cookie, если он будет расширен.

Попробуйте это ( демо )

$(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

это нормально, что вы можете увидеть значение куки в предупреждении и что оператор 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 добавьте имя, чтобы найти его при перезагрузке.

Данные здесь бесполезны, когдаобновляя страницу, данные больше не присутствуют.