cookie 存菜单的展开状态

用cookie 存菜单的展开状态

有时候一个项目中有很多个页面，每个页面可能都用到了侧边栏的导航，侧边栏的形式如下：

• 一级菜单
  
  • 二级菜单
• 一级菜单
  
  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
• 一级菜单
  
  • 二级菜单
  • 二级菜单
  • 二级菜单

---

我们知道点击二级菜单的链接会跳转到一个新页面，这时左边的侧边栏的折叠状态就回到了初始状态，并不会保持点击的二级菜单为展开状态，如下图，我点击了”用户管理”下面的”用户列表”，在”用户列表”页面侧边栏的状态并不是我们想要的。

我们希望跳转后的状态是这样的，如图：

---

解决方法：

我们可以将菜单的点击状态存入 cookie，也就是将点击的菜单的索引值 index 存入cookie，跳转页面后让等于cookie中索引值的二级菜单展开。代码如下：

html 代码：

<aside class="Hui-aside">    <div class="menu_dropdown bk_2">        <dl>            <dt>                <i><img src="static/h-ui/images/aside/parkingLot.png"></i> 停车场管理                <i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>            </dt>            <dd>                <ul>                    <li><a href="parking-manage.html">停车场管理</a>/li>                </ul>            </dd>        </dl>        <dl>            <dt>                <i><img src="static/h-ui/images/aside/user.png"></i> 用户管理                <i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>            </dt>            <dd>                <ul>                     <li><a href="user-list.html">用户列表</a></li>                    <li><a href="user-online.html">在线用户</a></li>                    <li><a href="user-appointment.html">预约用户</a></li>                    <li><a href="user-feedback.html">用户反馈信息查看</a></li>                </ul>            </dd>        </dl>        <dl>            <dt>                <i><img src="static/h-ui/images/aside/data.png"></i> 数据统计                <i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>            </dt>            <dd>                <ul>                    <li><a href="dataCount-inOut-hChart1.html">车辆进出情况</a></li>                    <li><a href="dataCount-pay-hChart2.html">出入付费情况</a></li>                    <li><a href="dataCount-No.100.html">停车次数排行</a></li>                </ul>            </dd>        </dl>    </div></aside>

jQuery 代码：

/* 记录上次菜单折叠状态  */$(function(){     var clickMenu = $.cookie('current');    $('.Hui-aside dl dt').each(function(i){        if(i == clickMenu){            $('.Hui-aside dl dt').eq(i).next().css('display','block');        }        $(this).click(function(){            if( $(this).next().css('display') == 'none'){                $('.Hui-aside dl dt').next().slideUp('slow');                $(this).next().slideDown('slow');                $.cookie('current', i, {expires: 3600 * 24 * 30, path: '/'});            }else{                $(this).next().slideUp('slow');            }        });    });});