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); //再执行关闭   

最后测试完美解决

总结

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

相关文章

  • js获取指定日期前后的日期代码

    js获取指定日期前后的日期代码

    js获取指定日期前后的日期,在实际应用中还是比较实用的,下面为大家简单介绍下具体的实现过程,有需要的朋友可以参考下
    2013-08-08
  • 利用策略模式与装饰模式扩展JavaScript表单验证功能

    利用策略模式与装饰模式扩展JavaScript表单验证功能

    这篇文章主要介绍了利用策略模式与装饰模式扩展JavaScript表单验证功能,需要的朋友可以参考下
    2017-02-02
  • JavaScript 跳出iframe框架示例详解

    JavaScript 跳出iframe框架示例详解

    这篇文章主要为大家介绍了JavaScript跳出iframe框架示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • javascript中的数字与字符串相加实例分析

    javascript中的数字与字符串相加实例分析

    javascript中的数字与字符串相加实例分析,学习js的朋友可以参考下。
    2011-08-08
  • JavaScript作用域全面总结(附详细代码)

    JavaScript作用域全面总结(附详细代码)

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,下面这篇文章主要介绍了JavaScript作用域全面总结的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-11-11
  • 表单切换,用回车键替换Tab健(不支持IE)

    表单切换,用回车键替换Tab健(不支持IE)

    表单切换,用回车键替换Tab健。input的属性tab的值表示切换的顺序,这个值必须是连续的,并且不能重复。目前不支持IE
    2011-07-07
  • 微信小程序wxss如何引用外部CSS文件以及iconfont

    微信小程序wxss如何引用外部CSS文件以及iconfont

    这篇文章主要给大家介绍了关于微信小程序wxss如何引用外部CSS文件以及iconfont的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • js表单验证实例讲解

    js表单验证实例讲解

    这篇文章主要为大家详细介绍了js表单验证,JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript中实现new的两种方式引发的探究

    JavaScript中实现new的两种方式引发的探究

    众所周知JS中new的作用是通过构造函数来创建一个实例对象,这篇文章主要给大家介绍了关于JavaScript中实现new的两种方式引发的相关资料,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • js实现淘宝首页的banner栏效果

    js实现淘宝首页的banner栏效果

    这篇文章主要为大家详细介绍了js实现淘宝首页的banner栏效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11

最新评论