应用前提:由于项目采用的是tiles框架,刷新页面时会使得页面的整体刷新,包括菜单,这样就会使得用户的体验不好,因此需要采用cookie记录菜单状态,刷新页面后菜单仍然保存为菜单刷新前的状态,提升用户胡体验。下面是具体的实现:
使用cookie页面里面必须要引入cookie支持:
<script src="assets/vendor/jquery/jquery.js"></script>
<script src="assets/vendor/jquery-cookie/jquery-cookie.js"></script>
收缩菜单样式是采用bootstarp的基本样式来完成:
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-parent menuli">
<a class="expanded">
<i class="fa fa-list" aria-hidden="true"></i>
<span>区域管理</span>
</a>
<ul class="nav nav-children">
<li>
<a href="#">北京</a>
</li>
</ul>
</li>
<li class="nav-parent menuli">
<a class="expanded">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>公告管理</span>
</a>
<ul class="nav nav-children">
<li>
<a href="#">公告展示</a>
</li>
</ul>
</li>
</ul>
</nav>
<hr class="separator" />
</div>
记住cookie的js代码:
$(function(){
//记录菜单状态
$(".expanded").click(function(){
//获取用于伸缩菜单的li的class
var classCookie = $(this).parent().attr("class");
//把li的class保存进cookie
$.cookie("classCookie",classCookie);
//获取状态改变的菜单的索引
var index = $(".nav-main .menuli").find(".expanded").index(this);
//保存状态改变菜单的索引
$.cookie("indexClass",index);
});
//刷新页面执行的操作,判断是否有cookie
if($.cookie("indexClass") != null && $.cookie("classCookie").indexOf("nav-expanded") == -1){
var num = $.cookie("indexClass");
//为li添加展开菜单的class
$(".nav-main .menuli").eq(num).addClass("nav-expanded");
}
})
其中expanded,nav-main,menuli是响应位置的class,如果想写改造自己的,就根据实际情况去改变,nav-expanded是我这里的展开菜单的class,这个位置也可以填写展开菜单样式的设置。(tip:最好是使用Firfox浏览器进行测试实现,Chrome对于记住cookie的支持好像不太好)
刷新前样式:刷新后样式:
至此,cookie保存菜单样式完成。