分享
  • 收藏
  • 举报
    X
    一段js解决多级栏目高亮
    416
    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>


    效果 


    5
    赏礼
    赏钱
    收藏
    点击回复
        全部留言
    • 10
    0 赏钱 赏礼回复
    • 袁冬 普通粉丝 消费: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在线 最近忙几个项目 
    0 赏钱 赏礼回复
    • 谷歌歌 普通粉丝 消费:904.42元 2022-05-23 15:59 15:596楼
    0 赏钱 赏礼回复
    • 银杏114在线 实战运营者 消费:3609.79元 2022-05-23 15:38 15:386楼
      漂亮
    0 赏钱 赏礼回复
    更多回复
        你可能感兴趣的主题
    恢复多功能编辑器
  • 3 1
  • 推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648