메뉴에 대한 펼치기/접기 표

Question

jquery를 통해 확장 및 축소 작업을 시도했습니다! 그러나 페이지가 다시로드되는 경우에도 토글 (표시 또는 숨기기) 상태를 저장하려고합니다. 쿠키를 사용해야한다는 사실을 알았습니다. 그러나 어떻게 완료되었는지는 모르겠습니까?

는 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('name', 'value'); 

7 일 다음에서, 만료 쿠키 만들기 :

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

는 전체 사이트에 걸쳐 유효 만료되는 쿠키를 만들기를 :

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

읽기 쿠키 :

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

가능한 모든 쿠키를 읽기 :

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

가 쿠키를 삭제

// 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이를 참조하십시오.