jquery菜單記住菜單的狀態

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

看來你想保存每個li.primary的狀態...使用$(this).cookie()將無法​​正常工作。因此，最簡單的解決方案是爲每個標題添加一個標識（我在此演示中添加了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的值中添加名稱以在重新加載時查找它。

這裏數據沒用，刷新頁面時數據不再存在。