LayUI动态树之三级菜单栏的实现

最新推荐文章于 2024-05-24 23:39:00 发布

_Leaf1217

最新推荐文章于 2024-05-24 23:39:00 发布

阅读量1.4k

点赞数 1

分类专栏： LayUI 文章标签： layui java

本文链接：https://blog.csdn.net/qq_63492318/article/details/125820288

版权

一、前言

1.1 前言

上一篇文章我们一起利用LayUI实现了动态菜单栏数据，但是那只是二级菜单，现实情况我们肯定会遇到更多级菜单数据的情况，而我们今天就一起来看看三级菜单要如何来处理！

1.2 前端代码

我们还是把前端的代码先放到这里！

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<-- 引入LayUI相关文件 -->
<%@include file="common/header.jsp" %>
<!DOCTYPE >
<html>
<head>
<title>Insert title here</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    
    <!-- 登录用户信息 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
    
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
      
      </ul>
     <ul class="layui-nav layui-nav-tree" id="menus" lay-filter="test">
      
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 0px;">
    	<div class="layui-tab" style="margin-top:0px;">
		  <ul class="layui-tab-title">
		    <li class="layui-this">网站设置</li>
		    <li>用户管理</li>
		    <li>权限分配</li>
		    <li>商品管理</li>
		    <li>订单管理</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">内容1</div>
		    <div class="layui-tab-item">内容2</div>
		    <div class="layui-tab-item">内容3</div>
		    <div class="layui-tab-item