通常我们在侧边栏目有二级 三级 更多级的时候 你选择二级栏目时候 如果你侧边栏默认是收缩的 页面跳转的时候 栏目又会恢复到全部收缩状态 方法有很多 现在介绍以下方式一:
<ul class="navMenu">
{yzn module="cms" action="category" catid="$top_parentid" cache="3600" order="listorder ASC" num="10" return="data"}
{foreach $data as $key=>$vo }
<li {in name="catid" value="$vo.arrchildid" }class="open" {/in}>
<a href="{$vo.url}" class="{in name=" catid" value="$vo.arrchildid" }active{/in} afinve">
<span class="">{$vo.catname}</span><span class="arrow open"></span>
</a>
{eq name="vo.child" value="1"}
<ul class="sub-menu" {in name="catid" value="$vo.arrchildid" }style="display: block;" {/in}>
{yzn module="cms" action="category" catid="$vo['id']" cache="3600" order="listorder ASC" num="10" return="data" }
{foreach $data as $key=>$vo }
<li class="">
<a href="{$vo.url}" class="afinve">
<span>{$vo.catname}</span>
{eq name='vo.child' value='1'}<span class="arrow"></span>{/eq}
</a>
{eq name="vo.child" value="1"}
<ul class="sub-menu" {in name="catid" value="$vo.arrchildid" }style="display: block;" {/in}>
{yzn module="cms" action="category" catid="$vo['id']" cache="3600" order="listorder ASC" num="10" return="data" }
{foreach $data as $key=>$vo }
<li><a href="{$vo.url}"><span>{$vo.catname}</span></a></li>
{/foreach}
{/yzn}
</ul>
{/eq}
</li>
{/foreach}
{/yzn}
</ul>
{/eq}
</li>
{/foreach}
{/yzn}
</ul>
<script type="text/javascript">
$(function() {
// nav收缩展开
$('.navMenu li a').on('click', function() {
var parent = $(this).parent().parent(); //获取当前页签的父级的父级
var labeul = $(this).parent("li").find(">ul")
if ($(this).parent().hasClass('open') == false) {
//展开未展开
parent.find('ul').slideUp(300);
parent.find("li").removeClass("open")
parent.find('li a').removeClass("active").find(".arrow").removeClass("open")
$(this).parent("li").addClass("open").find(labeul).slideDown(300);
$(this).addClass("active").find(".arrow").addClass("open")
} else {
$(this).parent("li").removeClass("open").find(labeul).slideUp(300);
if ($(this).parent().find("ul").length > 0) {
$(this).removeClass("active").find(".arrow").removeClass("open")
} else {
$(this).addClass("active")
}
}
});
});
</script>