layui导航栏二级菜单不显示及layer关闭问题解决方案

作者:模板散步时间:2026-10-30 19:08:43浏览:399

本文解决layui导航栏二级菜单无法展开及layer关闭iframe失败的问题。针对导航栏,需在Vue mounted钩子中初始化element模块;针对layer,需使用parent.layer.getFrameIndex获取索引并关闭。

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. 未添加代码前的效果

layui导航栏二级菜单不显示

2. 添加代码后的效果:

layui导航栏二级菜单不显示

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

最后测试完美解决

总结

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

作者最新文章
相关文章
更多