首页 > 网络编程 > JavaScript > javascript技巧 > layui导航栏二级菜单不显示

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

最后测试完美解决

总结

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