layui导航栏和layui.layui.msg问题
2024-08-26 11:57:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/assets/layui/css/layui.css" media="all">
<script type="text/javascript" src="/assets/layui/layui.js"></script> </head>
<body> <ul class="layui-nav layui-nav-tree layui-nav-side" 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> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;margin-right: 10px;">
<legend>垂直导航菜单</legend>
</fieldset> <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;margin-top: 60px;">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项一</a></dd>
<dd><a href="javascript:;">选项二</a></dd>
<dd><a href="javascript:;">选项三</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>
<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项一</a></dd>
<dd><a href="javascript:;">选项二</a></dd>
<dd><a href="javascript:;">选项三</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="javascript:;">移动模块</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>
</body>
<script type="text/javascript">
需要监听layer才可以调用他的功能 layui.use(['element','layer'], function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
var layer = layui.layer;//监听layer，否则不能用
//console.log("1121212"+layer); //这个可以查看元素是否为空 //监听导航点击
element.on('nav(demo)', function(elem){
console.log(elem.text());
layer.msg(elem.text());
});
});
</script>
</html>
有问题的js
<script type="text/javascript">
layui.use('element', function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 //监听导航点击
element.on('nav(demo)', function(elem){
console.log(elem.text());
layui.layer.msg(elem.text());
});
});
</script> 这样写，msg 会出现问题。不能实现功能。用msg的功能需要，监听layer,然后拿到layer对象才能调用msg的功能
layui，layer学习过程中...
最新文章
- Android注解使用之使用Support Annotations注解优化代码
- CSS3 animation 动画
- RichText
- cas单点登录 SSO 的实现原理
- MongoDB学习笔记——数据库安装及配置
- centos安装配置nginx
- HTML5 API 之 history
- sharepoint 删除list里的所有内容
- 【足迹C++primer】表达式求值
- WPF笔记(2.4 Grid)——Layout
- isapi_rewrite运行在.net framework 4.0+iis 6.0环境下404错误解决方案
- Linux Kernel(Android) 加密算法汇总（三）-应用程序调用内核加密算法接口
- Jquery一些常用的方法
- Java中Set集合是如何实现添加元素保证不重复的？
- 《剑指offer》-数字在排序数组中出现的次数
- 力扣（LeetCode）70. 爬楼梯
- Python3.5学习十八 Python之Web框架 Django
- Oracle RMAN 恢复数据库到不同主机（二）
- IT人应当知道的10个行业小内幕
- jmter提交图片