layui+beetl實現三級菜單


<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
            <!--一級菜單欄-->
            @for(title in titles){
                <!-- 判斷是否包含二級菜單欄 -->
                @if(tool.isEmpty(title.children)){
                    <li data-name="get" class="layui-nav-item">
                        <a href="javascript:;" lay-href="${ctxPath}${title.url}" lay-tips="${title.name}" lay-direction="2">
                            <i class="layui-icon ${title.icon}"></i>
                            <cite>${title.name}</cite>
                        </a>
                    </li>
                @}else{
                    <li data-name="home" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="${title.name}" lay-direction="2">
                            <i class="layui-icon ${title.icon}"></i>
                            <cite>${title.name}</cite>
                        </a>
                        <!--循環二級菜單-->
                        @for(subTitle in title.children){
                            <dl class="layui-nav-child">
                                <!-- 判斷是否包含三級菜單 -->
                                @if(tool.isEmpty(subTitle.children)){
                                    <dd data-name="console">
                                        <a lay-href="${ctxPath}${subTitle.url}">${subTitle.name}</a>
                                    </dd>
                                @}else{
                                    <dd data-name="console">
                                        <a href="javascript:;">${subTitle.name}<span class="layui-nav-more"></span></a>
                                        @for(subTitleC in subTitle.children){
                                            <dl class="layui-nav-child">
                                                <dd data-name="list">
                                                    <a lay-href="${ctxPath}${subTitleC.url}">${subTitleC.name}</a>
                                                </dd>
                                            </dl>
                                        @}
                                    </dd>
                                @}
                            </dl>
                        @}
                    </li>
                @}
            @}
        </ul>

沒時間整理,有時間深度挖掘實現無限菜單


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM