layui触碰提示框(layui禁用侧边导航栏点击事件的处理方法)
类别:Web前端 浏览量:1709
时间:2022-03-29 16:33:20 layui触碰提示框
layui禁用侧边导航栏点击事件的处理方法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禁用侧边导航栏点击事件的处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
您可能感兴趣
- layui导航栏(使用layui实现左侧菜单栏及动态操作tab项的方法)
- layui触碰提示框(layui禁用侧边导航栏点击事件的处理方法)
- layui多级联动下拉框的实现(使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果)
- thinkphp分页效果怎样(thinkphp5+layui实现的分页样式示例)
- thinkphp前后端配合(thinkPHP+LayUI 流加载实现功能)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
- 沪上这16所高校 萌新 礼包开箱 哪一款让你心动(沪上这16所高校萌新)
- 她救了被绑架的他,而这一切竟是一场阴谋...(她救了被绑架的他)
- 冬季养殖这6种阴生植物,方便又好养,你家有么(冬季养殖这6种阴生植物)
热门推荐
- docker的常用的命令(Docker 清理命令集锦)
- windowsserver远程登录和唤醒(Windows Server 2016远程桌面服务配置和授权激活2个用户)
- windowsotp是什么(WinSCP绿色版详细使用说明)
- 宝塔试用网站再安装nginx不起作用(宝塔面板Nginx防恶意解析图文教程)
- nginxpython编写模块(Python开发之Nginx+uWSGI+virtualenv多项目部署教程)
- 使用vue独立开发组件(vue单文件组件的实现)
- aws提供了哪些云服务(AWS与阿里云服务器在国内使用的简单对比评测)
- pycharm 爬虫的数据存在哪了(利用PyCharm Profile分析异步爬虫效率详解)
- ftp服务器设置好无法访问(登陆FTP服务器feat命令错误的解决方法[登陆后不能得到文件列表的解决办法])
- 数据库备份时需要注意的事情