javascript - 展开/折叠菜单表

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>

J查询:

$(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为此。

这就是它的工作原理..

创建 session 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 .