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');

从那时起7天内创建过期的Cookie：

$.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。

菜单的展开/折叠表

1 个答案: