一段js解决多级栏目高亮

官方动态功能建议插件模块风格模板问题反馈技术交流站长杂谈代码共享 V系列产品运营交流

分享 收藏 举报: X

一段js解决多级栏目高亮

wr1688 消费2593.25元 2022-05-23 10:48 10:48

风格开发者

641: 10

<script>
    var lt_nav_dom = $('.layui-nav .layui-nav-child').find('.layui-this');
    if(lt_nav_dom.length>0){
        lt_nav_dom.parent().parent().addClass('layui-this');//根据自己结构调整 适用于二级，三级及以上也可以参考这种写法，
    }
</script>

根据自己的导航结构改变

.layui-nav 是导航外层类名

.layui-nav-child 是子栏目外层类名

.layui-this 是高亮类名

参考：

{php}$menu_choose=config('system_dirname')?config('system_dirname'):'index'; {/php}
<div class="layui-nav navlist bgnone flex flex-between flex-items-center">
    {include file="index@common/pc_left_menu" /}
    {volist name=":get_web_menu('pc')" id="rs"}
    <li class="layui-nav-item {$rs.activate}  {if ($rs['activate']==$menu_choose||$rs['activate']==$menu_choose.'-'.$fid)} layui-this{/if}">
        <a href="{$rs.url}" class="tc">
            <i class="iconfont {$rs.style}"></i>
            <span class="weight-big">{$rs.name}</span>
        </a>
        {notempty name="rs.sons"}
        <dl class="layui-nav-child">
            {volist name="rs.sons" id="vs"}
            <dd class="{$vs.activate} {if ($vs['activate']==$menu_choose||$vs['activate']==$menu_choose.'-'.$fid)} layui-this{/if}"><a href="{$vs.url}"><i class="{$rs.style}"></i> {$vs.name}</a></dd>
            {/volist}
        </dl>
        {/notempty}
    </li>
    {/volist}
</div>

效果

赏礼

赏钱

点击回复

全部留言

共 10 条

ooke 普通粉丝

消费:840.7元 2024-11-11 14:24 14:246楼

@wr1688

没有出来哦，下拉的高亮代码出来了，但是上级菜单的高亮代码不显示的。

{php}$menu_choose=config('system_dirname')?config('system_dirname'):'index'; {/php}
<script>
    var lt_nav_dom = $('.mil-navigation .mil-has-children').find('.mil-current');
    if(lt_nav_dom.length>0){
        lt_nav_dom.parent().parent().addClass('mil-current');
    }
</script>
                        <nav>
                            <ul class="mil-navigation">
                                {volist name=":get_web_menu('pc')" id="rs"}
                                <li class="{notempty name="rs.sons"}mil-has-children{/notempty} {if ($rs['activate']==$menu_choose||$rs['activate']==$menu_choose.'-'.$fid)}mil-current{/if}">
                                    <a href="{$rs.url}">{$rs.name}</a>
                                    {notempty name="rs.sons"}
                                    <ul>
                                        {volist name="rs.sons" id="vs"}
                                        <li class="{if ($vs['activate']==$menu_choose||$vs['activate']==$menu_choose.'-'.$fid)}mil-current{/if}">
                                            <a href="{$vs.url}">{$vs.name}</a>
                                        </li>
                                        {/volist}
                                    </ul>
                                    {/notempty}
                                </li>
                                {/volist}
                            </ul>
                        </nav>

0 赏礼回复

飘絮惹尘埃-1 实战运营者 消费:5125.35元 2022-05-23 17:26 17:266楼

漂亮~~

0 赏礼回复

脚本导航 www.jaobe.com

袁冬普通粉丝消费:160.85元 2022-05-23 15:51 15:51
华为
6楼

layui才能用吧

wr1688 消费:2593.25元 2022-05-23 17:08

不是，根据自己的结构更换类名就行了

袁冬 消费:160.85元 华为 2022-05-23 17:09

那就太六了

0 赏礼回复

Suifeng 程序开发者 消费:23.24元 2022-05-23 15:34 15:346楼

漂亮

银杏114在线 消费:3609.79元 2022-05-23 15:39

随风大神，你好，感觉好久未见你的样子，

Suifeng 消费:23.24元 其他手机 2022-05-23 16:06

@银杏114在线最近忙几个项目