layui是一款优秀的前端模块化css框架,作者是贤心 —— 国内的一位前端大佬。

我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手。当然,她最大的优点我觉得还是她的模块化方式,相比requirejs,seajs之类繁琐的配置,她更简单粗暴。如果你正在寻找这样一个前端框架,那么我向你推荐她。

废话说了一堆,下面说重点。

先上张图

上面这张图对应的html代码是这样的

 <ul class="layui-nav layui-nav-tree" lay-filter="nav">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">销售管理</a>
<dl class="layui-nav-child">
<dd>
<a href="xiaoshoudingdan.asp">销售订单</a>
</dd>
<dd>
<a href="jianyidingdan.asp">建议订单</a>
</dd>
<dd>
<a href="xiaoshoutuidan.asp">销售退单</a>
</dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">采购管理</a>
<dl class="layui-nav-child">
<dd>
<a href="caigoudingdan.asp">采购订单</a>
</dd>
<dd>
<a href="caigoutuidan.asp">采购退单</a>
</dd>
</dl>
</li>
    .....此处省略N行代码

先简单分析一下这段代码:

layui-nav表示导航容器,layui-nav-tree表示树状导航,如果是侧边栏导航的话就需要加上这个类,如果是顶部导航就不需要;至于lay-filter="nav",官网的解释是“事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器”

每个li下面的第一个a标签是一级导航,dl包裹的是二级导航。默认情况下,只要你页面中引入了layui的内置模块element.js,当你点击一级导航时会折叠或者是展开二级菜单。可是我项目当中并不需要这一功能,于是需要禁掉。可是看过文档之后发现layui并没有提供可以禁掉该事件的属性。没办法,只能看看源码,好在layui的源码结构非常清晰,注释也非常详细,很快就能找到这个地方。

在element.js的377行这个位置加个return,让代码不在往下执行,问题就解决了。

折叠箭头也会消失

layui禁用侧边导航栏点击事件的更多相关文章

  1. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  2. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  3. 安卓ROOT后禁用/隐藏导航栏/虚拟按键

    安卓ROOT后禁用/隐藏导航栏/虚拟按键 提醒:提前装好EASY TOUCH 等类似工具. 用ROOT EXPLORER 或 ROOT BROWSER system\bulid.prop 最后加一行: ...

  4. Android 新兴的UI模式——侧边导航栏【转】

    侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu.Side Navigation等.当然谷歌现在已经推出类似这个效果的组件--Navigation Drawe ...

  5. 如何禁用 a 标签的点击事件

    a标签是没有disable属性的 ,如果想用disable 禁用a标签的点击事件,也可以实现: 1.a标签要用disable属性,必须和pointer-events属性一起使用, html代码: &l ...

  6. ios 导航栏 点击barbutton的按钮 下拉列表

    环境:xocde5.0.2+ios7.0.1 1.导航栏 ----点击科目--------下拉列表 代码:NGRightTableViewViewController.h #import <UI ...

  7. 【机器学习实践】Jupyter Notebook安装 侧边导航栏功能 操作及其他常用扩展功能介绍

    安装过程:  1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...

  8. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

  9. 转载 iOS拦截导航栏返回按钮事件的正确方式

    原文链接:http://www.jianshu.com/p/25fd027916fa 当我们使用了系统的导航栏时,默认点击返回按钮是 pop 回上一个界面.但是在有时候,我们需要在点击导航栏的返回按钮 ...

随机推荐

  1. JSONArray 遍历

    JSONArray 遍历   刚遇到一个接接口任务,发现其中返回数据中,是个字符串数组,数组中就是单个json形式的内容,其实应该也可以称这种数据叫做json数组吧,只不过是字符串形式.而我需要的是将 ...

  2. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  3. python redis客户端使用lua脚本

    有一个需求,为一个key设置一个field存储时间戳,每当有新数据,判断新数据时间戳是否大于之前的时间戳,如果是,更新时间戳,由于依赖中间执行结果,所以使用lua减少客户端和服务端通信次数. #!/u ...

  4. 飞利浦 PHILIPS 电动牙刷HX6730 拆解

    今日,一直比较喜欢用的电动牙刷,飞利浦HX6730坏掉了,初步感觉考虑飞利浦的保修,但是发现发票找不到了.飞利浦的客服也说,电动牙刷的两年保修依据分别是:1.发票开据日期:2.在无发票的情况下,看底部 ...

  5. mysql索引小结——高性能mysql

    1.索引可以包含一个或者多个列的值,如果索引包含多个列的值,列的顺序很重要,mysql只能高效地使用索引的最左列前缀列. 2.索引是在存储引擎层而非服务器层实现的. 3.B-tree索引的限制: 如果 ...

  6. VULKAN学习资料收集

    https://github.com/vinjn/awesome-vulkan 张静初 https://zhuanlan.zhihu.com/p/24798656 知乎 https://develop ...

  7. happyxiaofan的程序员书单

    转自   happyxiaofan 读书的看法 从15年7月至今,研究生期间读了不少书,读书让我学到了很多,也是提升技术能力的一个重要手段.可能很多人嫌读书太花时间,曾经的我一度也是这么认为的,觉得一 ...

  8. Haskell语言学习笔记(85)Async

    安装 async $ cabal install async async-2.2.1 installed async / wait / concurrently async :: IO a -> ...

  9. 讲一讲Servlet的生命周期

    1 实例化    servlet 容器创建servlet的实例; 2初始化   该容器调用init()方法;   每个实例,init()方法只被调用一次 3 服务    如果请求Servlet,则容器 ...

  10. week5 0.1 安装materializecss

    用ATOM打开项目 App是什么呢?就是App.js 我们将不需要的删掉 用一下materialize(类似bootstrap的东西) 官网https://materializecss.com/ 想用 ...