<!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学习过程中...

layui导航栏和layui.layui.msg问题的更多相关文章

  1. 修改layui的后台模板的左侧导航栏可以伸缩

    原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-s ...

  2. [转]layui点击左侧导航栏，实现不刷新整个页面，只刷新局部

    本文转自:https://blog.csdn.net/s31415926_004/article/details/84256587 其实这篇文章是给自己看的,以后忘记怎么做回来还能看一下哈哈哈哈哈哈哈 ...

  3. 监听导航新增Tab选项卡-layui

    1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...

  4. 导航栏控制器和标签栏控制器(UINavigationController和UITabBarController)混用

    很多时候,在UI设计方面同时需要使用导航控制器和标签栏控制器,这时,需要掌握如何设计结合使用这两种不同控制器.比如手机QQ,程序有三个标签 栏(分别为消息.联系人.动态),同时在选择某个联系人或者会话 ...

  5. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  6. day77:luffy:导航栏的实现&DjangoRestFramework JWT&多条件登录

    目录 1.导航栏的实现 2.登录前戏:用户表初始化 3.DjangoRestFramework JWT 4.多条件登录 5.登录状态的判断和退出登录 1.导航栏的实现 1.设计导航栏的model模型类 ...

  7. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  9. ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...

随机推荐

  1. 【JDK1.8】JUC——AbstractQueuedSynchronizer

    一.前言 在上一篇中,我们对LockSupport进行了阅读,因为它是实现我们今天要分析的AbstractQueuedSynchronizer(简称AQS)的基础,重新用一下最开始的图: 可以看到,在 ...

  2. 关于非现场审计软件的一些介绍（ACL、IEDA、Teammate）

    http://group.vsharing.com/Article.aspx?aid=661512 IDEA是由caseware开发的数据分析软件.caseware的网址如下:http://www.c ...

  3. [ Java面试题 ]基础篇之一

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...

  4. 与班尼特·胡迪一起做生意 （HZUN-2261）

    与班尼特·胡迪一起做生意 AC Time Limit:  1 s      Memory Limit:   256 MB Description 马爷作为2-80X的资深土财主,靠着敏锐的商业嗅觉不断 ...

  5. Ocelot中文文档-转换Headers

    Ocelot允许在请求下游服务之前和之后转换头部.目前Ocelot只支持查找和替换.这个功能在Github #190提出.我确定这个功能可以在各个方面发挥作用. 添加到请求 这个功能在GitHub # ...

  6. Python2和Python3的差异

    之前做Spark大数据分析的时候,考虑要做Python的版本升级,对于Python2和Python3的差异做了一个调研,主要对于语法和第三方工具包支持程度进行了比较. 基本语法差异 核心类差异 Pyt ...

  7. 通过Django Channels设计聊天机器人WEB框架

    这两个月都在忙着设计针对银联客服业务的智能聊天机器人,上一周已经交完设计报告,这一周还和部门同事一起分享了系统设计及运行效果.因为时间的关系,系统原型我使用了Flask+jQuery的组合,感觉用以原 ...

  8. RabbitMQ在windows系统安装部署文档

    1.RabbitMQ简介 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它 ...

  9. windows开发的python移植到linux的问题

    2016年1月28日 这个问题已经自己解决   file-setting下 左侧code style  line separator下拉选择unix就可以了 我在windows上开发的python想移 ...

  10. Java面向对象（一、封装）

    Java 封装 封装的概念 在面向对象程式设计方法中,封装(英语:Encapsulation)是指一种将抽象性函式接口的实现细节部份包装.隐藏起来的方法. 封装可以被认为是一个保护屏障,防止该类的代码 ...