0
点赞
收藏
分享

微信扫一扫

LAYUI三级菜单展示

快乐码农Alan007 2022-04-15 阅读 61
前端
<div class="menuFirst layui-tab">
 <!-- tab -->
    <ul class="layui-tab-title" id="menuFirstList">
        <!--一级菜单
		<li class="layui-this">
             <div><img src="../img/icon1.png" alt=""></div>
            <div>销售</div>
        </li>
        <li>
            <div><img src="../img/icon2.png" alt=""></div>
            <div>采购</div>
        </li>
        <li>
            <div><img src="../img/icon3.png" alt=""></div>
            <div>生产</div>
        </li>
        <li>
            <div><img src="../img/icon4.png" alt=""></div>
            <div>仓储</div>
        </li>
        <li>
            <div><img src="../img/icon5.png" alt=""></div>
            <div>财务</div>
        </li>
        <li>
            <div><img src="../img/icon6.png" alt=""></div>
            <div>配置</div>
        </li> -->
    </ul>
    <!-- tabcontent -->
    <div class="layui-tab-content" id="menuSecond">
        <!--2级菜单
		<div class="layui-tab-item layui-show">
		<!--2级菜单+3级菜单-->
            <%=MenuHtml.menu3HtmlLayui(request.getContextPath(), res)%>
        </div>
        <div class="layui-tab-item">111</div>
        <div class="layui-tab-item">222</div>
        <div class="layui-tab-item">3333</div>
        <div class="layui-tab-item">333</div>
        <div class="layui-tab-item">444</div> -->
    </div>
</div>

js
/**
    * 菜单
   */
   var menuList = <%=MenuHtml.menu2JSON(request.getContextPath(), res) %>;
   var menuFir = [];//一级菜单
   for (let x = 0; x < menuList.length; x++) {
       // 如果有children则为一级菜单
       if (menuList[x].children) {
           menuFir.push(menuList[x]);
       }
   }
   // 循环一级菜单
   for (let y = 0; y < menuFir.length; m++) {
       // 添加一级菜单
       var menuFirstHtml = '<li><div><img src="../img/icon' + (y + 1) + '.png" alt=""></div><div>' + menuFir[y].text + '</div></li>';
       $('#menuFirstList').append(menuFirstHtml);//
       // 添加2级菜单
       var menuSecHtml = '<div class="layui-tab-item">' + menuFir[y].children + '</div>';
       $('#menuSecond .layui-tab-item').append(menuSecHtml);
   }
   $('#menuFirstList li').eq(0).addClass('layui-this');//给第一个一级菜单加样式
   $('#menuSecond div').eq(0).addClass('layui-show');//显示第一个一级菜单
举报

相关推荐

0 条评论