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. hdoj 1003 学习思路

    基本解题思路:动态规划,不考虑穷举,分治. 根据网上,状态转移方程是:MaxSum[i] = Max{ MaxSum[i-1] + A[i], A[i]} 翻译公式:到当前位置i 时,最大子序列和为: ...

  2. [jQ]jQuery显式操作Checkbox,并用数组存储关联值的方案

    ---------------------------------------------------------------------------------------------------- ...

  3. Linux下MySQL5.7.18二进制包安装(手动添加配置文件my_default.cnf)

    本文出处:http://www.cnblogs.com/wy123/p/6815049.html 最新在学习MySQL,纯新手,对Linux了解的也不多,因为是下载的最新版的MySQL(MySQL5. ...

  4. Java复习 之多线程

    线程是一个程序中的不同路径 例子1 只有一条路径 每一个分支都是一个线程 实际上在一个时刻内 电脑只能运行一个进程 但是因为cpu运算速度很快 将时间分出来了 所以我们感觉是同时运行 创建线程的两种方 ...

  5. C++ 网络编程 总结

    第一次用C++写程序,对C++ 只是菜鸟级别的,倒是对C#很熟悉.两者有很大的相似性.但也有不同. 首先写了一个网络通讯用的小的MFC程序.发现 (1)MFC写界面真的好麻烦呀.  用C#写的tab ...

  6. Kubernetes1.9 二进制版集群+ipvs+coredns

    节点构造如下 : 节点ip 节点角色 hostname 192.168.0.57 node bigdata3       192.168.0.56 node bigdata4       192.16 ...

  7. anchor_generator.proto:11:3: Expected "required", "optio nal", or "repeated"

    转自:https://github.com/tensorflow/models/issues/1834 When I use the commond " protoc object_dete ...

  8. SPSS-生存分析

    生存分析 定义:一些医学事件所经历的时间:从开始观察到事件发生的时间,不是短期内可以明确判断的.针对这类生存资料的分析方法叫生存分析.生存分析的基本概念1.终点事件终点事件outcome event: ...

  9. yii基础控制器安全验证

  10. java工程师基础笔试题(一)-参考答案

    一.选择和填空  (不定项哦!) 1,如下是一份文件名为Test2.java的源文件,请问,编译该文件之后会生成几份字节码文件 class Test{ class Inner{} static cla ...