layui导航栏二级菜单不显示问题及解决

 更新时间:2023年05月19日 10:34:36   作者:清啊清小青  
这篇文章主要介绍了layui导航栏二级菜单不显示问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

layui导航栏二级菜单不显示

问题描述

在使用layui 中的导航栏组件时,除了 默认打开的第一个,其他的导航只能显示出一级的导航,

原因

查看layui 的官方文档,可以发现layui 的导航目录时依赖于element 的,所以我们需要创建一个element

解决方法

创建layui 下的element 即可

示例代码

1.Vue 项目中:

 <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a _href='#'>
                <i class="layui-icon layui-icon-home"></i>
                <cite>首页</cite>
              </a>
              <dl class="layui-nav-child">
                <dd>
                  <a  _index="0">项目介绍</a>
                </dd>
                <dd>
                  <a  _index="1">分析页</a>
                </dd>               
              </dl>
            </li>
            <li class="layui-nav-item">
              <a _href='#' v-on:click="chufa">
                <i class="layui-icon layui-icon-set-fill"></i>
                <span>系统管理</span>
              </a>
              <dl class="layui-nav-child">
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >用户管理</a>
                </dd>
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >角色管理</a>
                </dd>
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >菜单管理</a>
                </dd>
                <dd>
                  <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >登录日志</a>
                </dd>
              </dl>
            </li>
          </ul>

2.需要添加的代码如下:

在当前Vue 文件的mounted钩子函数中添加以下的代码:

mounted() {
this.$nextTick(() => {
  //导航栏依赖于 element 因此下面的代码是必须的否则二级导航内容就会不显示
  layui.use("element", function() {
    var element = layui.element;
  });    
});

结果对比

1.没加代码之前

2.加上代码之后:

layui中的一些问题

使用layui(版本号2.4.5),在引入js,css之后:

水平导航栏二级菜单一直不能显示

<script>
        layui.use('element', function(){
            var element = layui.element;
            element.on('nav(filter)', function(elem){
                console.log(elem); //得到当前点击的DOM对象
            });
        });
    </script>

解决办法:最后发现layui.all.js引入不能放在head标签内,需要在body最后面引入即可。

使用layer.open 中的iframe弹框,关闭失败的问题

最开始解决办法,根据官网示例:即

var index = layer.open({
    ……
});
layer.close(index);/   layer.closeAll()

但是使用这种两种方法发现怎么都关闭不了,后来再仔细看官方文档时发现关闭iframe 需要使用下面的方法

//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭   

最后测试完美解决

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript限制用户只能输汉字中文的方法

    javascript限制用户只能输汉字中文的方法

    这篇文章主要介绍了javascript限制用户只能输汉字中文的方法,实例列举了利用Unicode判断与正则判断两种方法,具有一定的实用价值,需要的朋友可以参考下
    2014-11-11
  • 模拟抽奖

    模拟抽奖

    模拟抽奖...
    2006-08-08
  • JavaScript实现图片拖曳效果

    JavaScript实现图片拖曳效果

    这篇文章主要为大家详细介绍了JavaScript实现图片拖曳效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • js实现最短的XML格式化工具实例

    js实现最短的XML格式化工具实例

    这篇文章主要介绍了js实现最短的XML格式化工具,实例分析了基于jquery-latest.js实现XML代码格式化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • javascript/jquery获取地址栏url参数的方法

    javascript/jquery获取地址栏url参数的方法

    本篇文章主要是对javascript/jquery获取地址栏url参数的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JS面试题之forEach能否跳出循环详解

    JS面试题之forEach能否跳出循环详解

    js中经常会使用foreach这个方法来遍历数组,这篇文章主要给大家介绍了关于JS面试题之forEach能否跳出循环的相关资料,需要的朋友可以参考下
    2021-06-06
  • 前端使用JS内置Blob实现下载各种形式的文件实例

    前端使用JS内置Blob实现下载各种形式的文件实例

    通过使用JavaScript我们可以很方便地实现文件的下载功能,这篇文章主要给大家介绍了关于前端使用JS内置Blob实现下载各种形式文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 谈一谈javascript中继承的多种方式

    谈一谈javascript中继承的多种方式

    本文就和大家谈一谈javascript中的继承,什么是继承,继承的作用,以及js继承的实现代码,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript onblur与onfocus事件详解

    JavaScript onblur与onfocus事件详解

    这篇文章主要介绍了JavaScript onblur与onfocus事件详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 在Ajax中使用Flash实现跨域数据读取的实现方法

    在Ajax中使用Flash实现跨域数据读取的实现方法

    今天,小子再提供一种使用Flash进行跨域操作的方法。众所周之,其实Flash的跨域操作也是有限制的,不过,Flash的跨域配置比简单,只需要在站点根目录下放置crossdomain.xml即可。
    2010-12-12

最新评论