菜单展开/折叠表

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。