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. BBS-基于用户认证组建和Ajax实现登陆验证

    功能1: 基于用户认证组件和Ajax实现登录验证(图片验证码) 总结: 1 一次请求伴随多次请求 2 PIL 3 session存储 4 验证码刷新 步骤: 1.配置静态文件夹 settings.py ...

  2. Django--URL(路由层)

    一.django 静态文件配置 在配置文件中settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR ...

  3. DJango之视图函数

    一)Django WEB框架 2) request.path和request.get_full_path() 是请求的路径 3)render:页面渲染 4)redirect:页面跳转 3)模板语法: ...

  4. 正则前面的 (?i) (?s) (?m) (?is) (?im)

    (?i) 表示所在位置右侧的表达式开启忽略大小写模式(?s) 表示所在位置右侧的表达式开启单行模式(?m) 表示所在位置右侧的表示式开启指定多行模式(?is) 更改句点字符 (.) 的含义,以使它与每 ...

  5. jvm问题

     问题: 1. 一台服务器,部署多个服务,请问,这多个服务,对应的是一个jvm,还是多个jvm? 2. 一个线程,从controller 到 service,到DAO,会调用多个方法,请问是 对应一个 ...

  6. unity "[ ]"标签

    [CanEditMultipleObjects]//可多对象编辑 public class Collider2DEditor:Editor {} [SerializeField]//序列化私有属性 p ...

  7. ios嵌套H5页面,出现的小bug;

    ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content=" ...

  8. C++ 与 CDC相关的知识,点滴总结

    hdc = GetDC (hwnd) ; GetDc函数:用于获得hWnd参数所指定窗口的客户区域的一个设备环境. 所获得的设备环境可以是通用.类或者私有类型,具体由指定窗口的类风格决定.对于通用设备 ...

  9. linux下搭建生成HLS所需的.ts和.m3u8文件

    要想利用HLS来实现视频的在线播放,就得需要将一个完整的视频文件切割成多个ts视频流,然后利用m3u8的索引文件来播放. 在Mac下,苹果提供了streamingTools的工具,里面有mediafi ...

  10. 关于xml中自动提示功能的设置

    我们在编写xml文件时如果有自动提示功能,将会事半功倍,下面我就怎么设置xml进行说明: 在xml文件的开始几行一般有编写xml文件的语法要求;如 <!DOCTYPE hibernate-con ...