菜單展開/摺疊表

Question

我試過通過jquery展開和摺疊操作！ 但我更希望保存切換（顯示或隱藏）的狀態，即使頁面重新加載。 我知道我需要使用cookie ..但我不知道它是如何完成的？

HTML：

<table width="150px" id="tbl1" class="hvr"> 
<tr class="header"> 
    <th style="font-weight:500;">Navigation<span>-</span></th> 
</tr> 
<tr> 
<td align="center"><a href="dashboard.php">Home</a></td> 
</tr> 
<tr> 
<td align="center"><a href="slots.php">My Team</a></td> 
</tr> 
<tr> 
<td align="center"><a href="collection.php">All Pokemons</a></td> 
</tr> 
<tr> 
<td align="center"><a href="battlenow.php">Battle</a></td> 
</tr> 
<tr> 
<td align="center"><a href="train.php">Train Pokemon</a></td> 
</tr> 
<tr> 
<td align="center"><a href="tradecenter.php">My Trade</a></td> 
</tr> 
<tr> 
<td align="center"><a href="online.php">Online Members</a></td> 
</tr> 
<tr> 
<td align="center"><a href="members.php">Members</a></td> 
</tr> 
<tr> 
<td align="center"><a href="settings.php">Settings</a></td> 
</tr> 
<tr> 
<td align="center"><a href="logout.php">Logout</a></td> 
</tr> 
</table> 

的Jquery：

$(document).ready(function(){ 
$('.header').click(function(){ 
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'}); 
$(this).nextUntil('tr.header').slideToggle(100, function(){}); 
}); 
}); 

http://jsfiddle.net/te9cB/

Answer 1

可以使用jquery cookie plugin這一點。

這是如何運作..

創建會話cookie：

$.cookie('name', 'value'); 

創建到期的cookie，從此7天：

$.cookie('name', 'value', { expires: 7 }); 

創建到期的cookie，橫跨整個網站有效：

$.cookie('name', 'value', { expires: 7, path: '/' }); 

讀取Cookie：

$.cookie('name'); // => "value" 
$.cookie('nothing'); // => undefined 

讀取所有可用的cookie：

$.cookie(); // => { "name": "value" } 

刪除Cookie：

// Returns true when cookie was successfully deleted, otherwise false 
$.removeCookie('name'); // => true 
$.removeCookie('nothing'); // => false 

// Need to use the same attributes (path, domain) as what the cookie was written with 
$.cookie('name', 'value', { path: '/' }); 
// This won't work! 
$.removeCookie('name'); // => false 
// This will work! 
$.removeCookie('name', { path: '/' }); // => true 

而且看到一個implementation example。