官方提供的样式代码:


<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</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>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

解决办法:


<style> .layui-nav-item a{
background-color: #4E5465;
color: #ffffff;
} .layui-nav-item .layui-nav-child a{
background-color: #333333;
color: #ffffff;
} /*禁用左侧菜单的箭头*/
body .layui-nav .layui-nav-more{display: none} </style> <script> layui.use(['element','layer'], function(){
var element = layui.element, //导航的hover效果、二级菜单等功能,需要依赖element模块
layer = layui.layer;
//监听导航点击
element.on('nav(test)', function(elem){
layer.msg(elem.text());
//禁用菜单的折叠
$(".layui-nav-tree").find(".layui-nav-child").css("display","contents"); });
});
</script>

【Layui】侧边菜单导航禁用折叠、去除箭头样式的更多相关文章

  1. 利用ExpandableListView和gridview 显示可展开折叠菜单导航

    这篇随身笔带来的是结合聚合数据“菜谱大全”做的一个菜谱可折叠一级+二级列表. 先发来一些截图一睹为快吧. ExpandableListView 可用于折叠型菜单列表,其布局主要通过getGroupVi ...

  2. layui 3种导航栏

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html ...

  3. 分享21个基于jquery菜单导航的效果

    jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...

  4. iOS之UI--使用SWRevealViewController实现侧边菜单功能详解实例

    使用SWRevealViewController实现侧边菜单功能详解 下面通过两种方法详解SWRevealViewController实现侧边菜单功能: 1.使用StoryBoard实现   2.纯代 ...

  5. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  6. JQuery攻略(六)菜单导航

    jQuery菜单导航的基础应用 此章节有 1.0 页面导航 1.01面包屑菜单 1.02菜单悬停 1.03菜单快捷键 1.04两个单独的菜单 1.05折叠菜单 1.01面包屑菜单 html <b ...

  7. EasyMvc入门教程-基本控件说明(11)菜单导航

    基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的? 似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码: @{ var data = new List<Men ...

  8. iOS之UI--使用SWRevealViewController 实现侧边菜单功能详解实例

     iOS之UI--使用SWRevealViewController 实现侧边菜单功能详解实例 使用SWRevealViewController实现侧边菜单功能详解 下面通过两种方法详解SWReveal ...

  9. Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

    准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...

随机推荐

  1. KVM-安装windows

    硬盘.网卡选择vitio 虚拟机配置2个cd-rom,分别挂载系统iso与virtio-win 开始安装无法识别硬盘,加载光驱驱动 安装完成进入系统之后,设备管理器添加驱动,识别设备

  2. python应用-输出验证码

    from random import randint def generate_code (code_len): """ 生成确定位数的验证码 :param code_l ...

  3. python--模块学习之xml模块

    xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 本文主要学习的ElementTree是python的XML处理模块,它提供了一个轻量级的对象 ...

  4. SC CSP-J2019初赛成绩已出!

    链接: https://pan.baidu.com/s/1UK2pL7UW0n0vYpnzMbJm9A 提取码: uwav 复制这段内容后打开百度网盘手机App,操作更方便哦 Me?87! I am  ...

  5. Install Python3.6 on Amazon Linux/EC2 在Amazon Linux实例中安装使用Python3.6

    本文转载自 https://gist.github.com/niranjv/f80fc1f488afc49845e2ff3d5df7f83b 由于Amazon Linux中预装的Python版本为2. ...

  6. 洛谷 P5269 欧稳欧再次学车 题解

    P5269 欧稳欧再次学车 题目背景 请自行脑补一张欧稳欧学车的图 题目描述 欧稳欧学车时经常用一辆橡树车练习.这辆橡树车共有 \(N\) 个挡位,欧稳欧每秒可以把挡位增加或减少 \(1\),初始时( ...

  7. create-react-app不支持less的解决方式

    进入node_modules\react-scripts\config目录 修改webpack.config.dev.js跟webpack.config.prod.js中关于loader的配置即可,注 ...

  8. ES6 - 开篇

    一些关于es6简单的介绍与了解.初始认知有限,循序完善. ES6: 又叫ES2015,是2015年推出的JavaScript新版本. 相应的,后边推出的ES7.8.9.10等都依次是上一版本发出后一年 ...

  9. Centos7 配置静态IP并使用xshell远程连接

    静态IP配置 1.定位到 /etc/sysconfig/network-scripts文件夹,打开文件夹下面的ifcfg-enp3s0文件 2.修改BOOTPROTO=static  ONBOOT=y ...

  10. js传对象处理

    JSON.stringify(carlist); 需要先将对象进行处理:如果服务端解析异常,可以先将这个值单独解析一次