jQuery教學－記憶型滑動式展開選單，換頁重整選單不收合

#menu {
width: 155px;
background-color: #bce0de;
}
#menu dt {
cursor: pointer;
}
#menu dd, #menu  ul {
margin: 0;
padding: 0;
}
#menu ul li {
list-style: none;
}
#menu ul li a {
text-decoration: none;
color: #660;
}
#menu ul li a:hover {
text-decoration: underline;
}

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(function(){
var _menu_id = $.cookie('menu_id');
$("#menu dt").click(function(){
//將選單索引值寫入cookie
var _index = $("#menu dt").index(this);
$.cookie("menu_id", _index);

var _this = $(this);
var _ans = $(this).next();

if(_ans.is(":visible")){
_ans.slideUp();
}else{
$("#menu dd").slideUp();
_ans.slideDown();
}
}).next().slideUp();

//當cookie值不等於空時，就展開選單
if($.cookie("menu_id")!=null){
$("#menu dd").eq(_menu_id).slideDown();
}

//清除cookie
$("#c-cookie").click(function(){
$.cookie("menu_id", null);
});

});
</script>

<dl id="menu">
<dt>選單一</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
        </ul>
    </dd>
 
<dt>選單二</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
            <li><a href="#">次選單二</a></li>
            <li><a href="#">次選單三</a></li>
        </ul>
    </dd>
    
 <dt>選單三</dt>
    <dd>
        <ul>
            <li><a href="#">次選單一</a></li>
            <li><a href="#">次選單二</a></li>
            <li><a href="#">次選單三</a></li>
        </ul>
    </dd>
</dl>