8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png
侧边栏展开对应的栏目
admin 1月前

通常我们在侧边栏目有二级 三级 更多级的时候 你选择二级栏目时候 如果你侧边栏默认是收缩的 页面跳转的时候 栏目又会恢复到全部收缩状态 方法有很多 现在介绍以下方式一:

<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>


最新回复 (0)
    • YznCMS交流社区
      2
        登录 注册 QQ登录
返回