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

最后测试完美解决

总结

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

相关文章

  • 解决echarts的多个折现数据出现坐标和值对不上的问题

    解决echarts的多个折现数据出现坐标和值对不上的问题

    这篇文章主要介绍了解决echarts的多个折现数据出现坐标和值对不上的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JS 使用for循环遍历子节点查找元素

    JS 使用for循环遍历子节点查找元素

    这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素,经测试,效果不错,需要的朋友可以看看
    2014-09-09
  • JavaScript 加号(+)运算符号

    JavaScript 加号(+)运算符号

    在一些框架中看到了类似这样的写法:+new Date();感觉有些怪,查阅了相关资料和一些网友的帮助.对此用法解释如下,希望对大家有所帮助,不合适的地方请大家指正!
    2009-12-12
  • javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号

    javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号

    从1--9中选取N个数字,组成不重复的N位数,从小到大进行编号,当输入其中任何一个数M时,能找出该数字对应的编号
    2012-07-07
  • JS实现给json数组动态赋值的方法示例

    JS实现给json数组动态赋值的方法示例

    这篇文章主要介绍了JS实现给json数组动态赋值的方法,结合实例形式分析了javascript针对json数组的遍历、赋值等常用操作技巧,需要的朋友可以参考下
    2017-07-07
  • JavaScript 批量创建数组的方法

    JavaScript 批量创建数组的方法

    JavaScript有许多批量创建数组的方法,为了衡量它们的性能,我分别使用不同的方法创建一个长度为100000的数组,且键和值相等,今天小编给大家分享基于js批量创建数组的方法,一起看看吧
    2017-03-03
  • JavaScript图像延迟加载库Echo.js

    JavaScript图像延迟加载库Echo.js

    Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性,通过本文给大家介绍JavaScript图像延迟加载库Echo.js ,感兴趣的朋友一起学习吧
    2016-04-04
  • swiper+echarts实现多个仪表盘左右滚动效果

    swiper+echarts实现多个仪表盘左右滚动效果

    这篇文章主要为大家详细介绍了swiper+echarts实现多个仪表盘左右滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • js实现课堂随机点名系统

    js实现课堂随机点名系统

    这篇文章主要介绍了js实现课堂随机点名系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • javascript产生随机数方法汇总

    javascript产生随机数方法汇总

    这篇文章主要介绍了javascript产生随机数方法汇总的相关资料,需要的朋友可以参考下
    2016-01-01

最新评论