layui左侧三级菜单2.0

2023-10-30

之前在layui 1.0的时候写过一个三级菜单,那时候用三级菜单还要自己扩展,与后台交互也显得麻烦,现在新版本的layui自动就可以实现三级菜单了,很多朋友在问,我就帮大家整理了一下样式大家可以改改,直接上代码:

<link rel="stylesheet" type="text/css" href="css/layui.css" />
<script src="layui.all.js"></script>

<ul class="layui-nav layui-nav-tree" >
    <li data-name="home" class="layui-nav-item">
        <a href="javascript:;" lay-tips="主页" lay-direction="2">
            <i class="layui-icon layui-icon-home"></i>
            <cite>主页</cite>
            <span class="layui-nav-more"></span></a>
        <dl class="layui-nav-child">
            <dd data-name="console" class="layui-this">
                <a lay-href="home/console.html">控制台</a>
            </dd>
        </dl>
    </li>
    <li data-name="component" class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;" lay-tips="组件" lay-direction="2">
            <i class="layui-icon layui-icon-component"></i>
            <cite>组件</cite>
            <span class="layui-nav-more"></span></a>
        <dl class="layui-nav-child">
            <dd data-name="grid">
                <a href="javascript:;">栅格<span class="layui-nav-more"></span></a>
                <dl class="layui-nav-child">
                    <dd data-name="list">
                        <a lay-href="component/grid/list.html">等比例列表排列</a>
                    </dd>
                    <dd data-name="mobile">
                        <a lay-href="component/grid/mobile.html">按移动端排列</a>
                    </dd>
                </dl>
            </dd>
            <dd data-name="button">
                <a lay-href="component/button/index.html">按钮</a>
            </dd>
        </dl>
    </li>
</ul>

这里提醒一下,要加载layui.all.js,加载layui.js菜单收缩功能无效。
只要按这种写法,应该是可以实现无限级菜单的。与后台交互的时候用地柜算法就可以全部遍历出来,这里没有写实例,如果遇到问题的可以留言交流,谢谢。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

layui左侧三级菜单2.0 的相关文章

  • 让Layui的table模块支持动态表头

    layui自带的table js插件是不支持的 这里我们简单的加几个字符进去 就可以支持了 1 打开插件目录下的layui lay modules目录 用文本文件打开table js 然后搜索 item2 title 在table js将
  • 对象转换为JSON数据格式&使用JQuery获取数据

    将对象转换为JSON数据格式 我们需要json lib 2 3 jdk15 jar架包 当然还需要其它架包 来实现对象转JSON数据格式 此架包提供两个类来实现转换 JSONObject fromObject object 将对象转换成js
  • 科技感十足的網站頁面

    http www bootstrapmb com item 9102 preview
  • 在JavaScript的ES5版本中Array数组的reduce方法详解

    函数声明 reduce callback initialValue 参数说明 callback 回调函数 格式为function prev next initialValue 初始值 可选参数 返回值 最后一次执行callback 回调函数
  • 使用layui/layuiAdmin的总结

    layui是一个前端UI框架 主要是配合JQuery使用 开始使用 首先是下载文件 然后引入css和js文件 引入之后就需要在
  • CSS动画:Transition与Animation

    本文总结CSS3中两个用来做动画的属性 一个是transition 另一个是animation 差异比较 CSS3 差异 transition 在给定的持续时间内平滑地更改属性值 从一个值到另一个值 也就是只需要指定开始与结束的参数 参数改
  • Layui框架的拖动上传 以及 时间选择器的基本使用

    上传用的layui的点击or拖动上传 其他上传也同理 不喜勿喷 欢迎补充 上代码 html div class layui form item style width 1 div
  • 微信小程序开发教程

    一 准备 下载微信小程序开发者工具 下载地址 注册微信小程序 前往注册 微信小程序开发文档 前往阅览 打开开发者工具 用微信扫码进入创建页面 填写配置如下 需要注意的是 AppId可以选择已经注册的账号Appid 也可以选择测试号 区别是测
  • layui switch 设置默认开关属性

    给元素定义ID switch order var flag true if flag document getElementById switch order setAttribute checked on else document ge
  • LayUI中的基本元素之面板

    前言 最近在准备找工作的事项 但是作为一个后台也是需要了解一些前端框架的 就目前的来说有大火的VUE 但是VUE还是存在一定的学习成本 所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手 后面会考虑使用VUE ElementUI
  • 初识Layui——Layui的使用

    目录 1 获取layui 2 开始使用 3 定义layui模块 4 使用layui模块 5 建立入口文件 1 获取layui 1 去官网首页下载 layui已停止维护 2 互联网搜索 目录结构如下 css css目录 modules 模块c
  • layui php+PHPExcel 拉取excel表格数据一键导入

    需求 大量数据需要导入数据库 直接拉取excel表格进行读取数据并存入数据库 过程中不对文件进行存储 使用上传过程中的缓存文件 前端代码 layui php
  • 【JavaScript】正则表达式 VS 正规式

    在看JS之前没有怎么接触过正则表达式 只是知道有这么个东西 而在软考学习的时候 在编译原理这块有一个正规式 当时只知道这两个东西不是一个概念 具体哪里不同不太清楚 现在正好学到这里了 在此对比总结一下 一 正规式 一种表示正规集的工具 正规
  • CSS 学习笔记(基础)

    用来控制网页表现的语言 CSS Cascading Style Sheet 层叠样式表 然后我们继续看看 W3C 标准 结构 HTML 表现 CSS 行为 JavaScript CSS导入方式 选择器 属性 由于网页的框架结构是由HTML实
  • 一眼看懂promise与async await的区别

    promise方法 let p1 new Promise resolve reject gt setTimeout gt resolve 我是p1 4000 let p2 new Promise resolve reject gt setT
  • uview的select组件选择问题

    官方文档羞涩难懂 直接用拖拽工具 对于常用的表单组件 可直接帮你生成相关事件 时间 单列多列等选择器等支持数据回显功能 免开发 在拖拽面板中的 formitem 表单项中 转载 uniapp页面速成提效工具 uniapp uview ui
  • 前端使用layui结合canvas实现图片验证码

    fieldset class layui elem field layui field title style margin top 20px legend 图形验证码 legend fieldset
  • 谷歌(Chrome)浏览器自定义插件

    准备 1 js文件 需要的功能逻辑 2 插件主入口及配置 manifest json 3 插件图标 目录结构 添加插件流程 选择插件文件夹 代码 manifest json name 百度 manifest version 2 versio
  • 点击按钮复制链接

    做点击按钮复制链接 网上找的方法是用原生js document execCommand Copy window clipboardData setData Text url value 发现微信上存在不兼容 在安卓和PC段都可以 但是在苹果
  • layui表格table不分页,显示全部数据

    layui表格table不分页 显示全部数据 表格渲染时添加两行代码 page false limit Number MAX VALUE 数据表格默认全部显示 table render elem orderTable id orderTab

随机推荐

  • 篮球游戏-第12届蓝桥杯Scratch省赛2真题第4题

    导读 超平老师计划推出Scratch蓝桥杯真题解析100讲 这是超平老师解读Scratch蓝桥真题系列的第47讲 第12届蓝桥杯青少年组省赛分两次进行 这是2020年10月19日举行的第一次省赛考试中级组 形式为在线考试 Scratch分为
  • GitLab的Webhook配置和开发

    文章目录 前提准备 企业微信消息发送接口 gitlab 账号 用户组 项目 gitlab开放API文档 webhook配置和开发 配置webhook gitlab的webhook原理 项目实战 总结 本文主要介绍如何使用gitlab的web
  • win10、11 中“windbg+vmware+win7双机调试”设置

    0x00 目的 搭建windows内核调试环境 基于windbg vmware搭建双机调试环境 windbg安装在物理windows操作系统上 vmware内安装win7 32位操作系统 如果windbg可以对vmware内的虚拟机进行断点
  • 测试体质的软件有哪些,有哪些APP可以测体脂?测体脂率APP分享

    在现代生活中 有越来越多的用户都非常注重自己的身体健康 所以有越来越多的人都在减肥都在健身 希望可以保持自己的身材 那么如何才可以避免过度的减肥呢 如何才算达到一个正常的体重呢 体脂可以说是非常重要了 那么有哪些APP可以帮助我们测体脂呢
  • 使用python求两个矩阵的余弦距离

    文章目录 求两个矩阵的余弦距离 导入必要的库 第一种思路 第二种思路 求两个矩阵的余弦距离 余弦距离可适应用于人脸识别 将待识别人脸的图像提取特征 与人脸注册库的所有图像的特征矩阵求距离 然后找到最相似的 本文提供两种思路三种编程方法 导入
  • 最全大数据学习资源整理

    关系数据库管理系统 RDBMS MySQL 世界最流行的开源数据库 PostgreSQL 世界最先进的开源数据库 Oracle 数据库 对象 关系型数据库管理系统 框架 Apache Hadoop 分布式处理架构 结合了 MapReduce
  • python发送邮件附件中文名乱码_Python发送邮件解决各客户端乱码问题

    最近有一个项目需要每天以发送邮件的形式通知客户 爬虫工作情况 今日违规 爬取数量等信息 小编心里想 手动发送吧 多累 索性写了个代码去做这个工作 结果发现发送到不同的邮箱就会出现乱码的情况 对于同一个邮箱 而客户端和网页端也会出现乱码 经过
  • 陀螺专访

    3月30日 新浪与五粮液两大集团宣布联袂发布 五粮液数字酒证 并于 臻久网 正式开启预约 五粮液 区块链意味着什么 数字酒证要如何购买交易 酒证与传统实物酒有哪些差异 带着这些疑问 陀螺财经特别采访到臻久网CEO庞剑飞 与他一起探讨了那些关
  • mysql备份数据库以及拷贝数据库到另一台服务器上

    项目要结束了 至少开发要结束了 回头看看自己就这么一个人埋头开发了4个月 以及手上拿到的与自己付出完全不成正比的微薄工资 觉得自己真tmd的悲剧 或许这就是应届毕业生的命吧 恩 现在我已经不是应届毕业生了 现在项目做完了 我也尽到了善始善终
  • android otg主从切换,一种自动切换OTG设备主从模式下的Vbus电压的方法与电路与流程...

    本发明涉及otg设备的检测领域 更具体地说 涉及一种自动切换otg设备主从模式下的vbus电压的方法与电路 背景技术 现有技术中 具备otg功能的设备通过检测usb id引脚的状态来判断工作为host 主模式 usb id悬空 或者devi
  • 游戏开发各组件介绍

    控件control 控件是任何可以被看到 动画化和 或以某种方式交互的对象 控件是用户界面的基本构建块 示例包括精灵图像 按钮 标签等 视图view 视图是控件和动画的集合 表示用户界面中的逻辑 屏幕 视图的一个例子是应用程序中的主菜单或闪
  • 《信号与系统》解读 第1章 信号与系统概述-5:非常重要!!!深入、详细地解读什么基本的复指数信号、IQ信号、欧拉公式?

    前言 正弦信号与复指数信号 更准确称为虚指数信号 是现代移动通信系统中最基本的信号 其中正弦信号常是射频调制的载波信号 而虚指数信号 包含了两路同频的正交正弦与余弦信号 常用于现代通信基带数字调制 因此理解正弦信号和复指数信号 是深入理解现
  • 计算机基础:原码补码反码计算

    结论 1 正数的原码 反码 补码 2 负数的反码 在其原码的基础上 符号位不变 其余各个位取反 负数的补码 在反码的基础上 1 负数的补码 在原码的基础上 符号位不变 其余各位取反 最后末位 13 0 在计算机种分 0与 0 它们的原码 补
  • electron-updater更新遇到的问题 The URL protocol of the current origin (‘app://.‘) is not supported

    目前的Vue脚手架 我使用的是vue cli4 默认会携带一个 registerServiceWorker的东西 这个东西是做什么的呢 首先说明 registerServiceWorker可以运用于主流框架 它只是为了简化缓存机制产生的js
  • 大学生团体天梯赛(第十届)

    题目地址 天梯赛 include
  • pppd详解_pppd拨号脚本说明文档

    加入调试信息 nodetach ipcp accept local ipcp accept remote usepeerdns 使用服务器端协商的 DNS defaultroute 使用默认线路 user card 电信 card 移动 c
  • 【ShaderToy】基础篇之谈谈点、线的绘制

    写在前面 写前面一篇的时候 发现还是不够基础 因此打算增加几篇基础篇 从点线面开始 希望可以更好理解 其实用Pixel Shader的过程很像在纸上绘画的过程 屏幕上的每一个像素对应了纸上的一个方格 如果你愿意 你甚至可以一个个判断像素的位
  • JS实现数组随机读取思路,js数组随机思路分析

    需要了解的 Math 对象方法 方法 描述 ceil x 对数进行上舍入 即向上取整 floor x 对 x 进行下舍入 即向下取整 round x 四舍五入 random 返回 0 1 之间的随机数 包含 0 不包含 1 一些实例说明 M
  • matlab函数库-optimset,非线性优化-matlab函数库-optimset

    创建或编辑一个最优化参数选项 句法规则 options optimset param1 value1 param2 value2 设置所有参数及其值 未设置的为默认值 options optimset optimfun 设置与最优化函数有关
  • layui左侧三级菜单2.0

    之前在layui 1 0的时候写过一个三级菜单 那时候用三级菜单还要自己扩展 与后台交互也显得麻烦 现在新版本的layui自动就可以实现三级菜单了 很多朋友在问 我就帮大家整理了一下样式大家可以改改 直接上代码 ul class layui