layui 无法加载二级菜单

在写个页面用到导航,然后去用layui的导航。复制了代码,导入了css和js。也复制了文档中的依赖element代码

element代码如下:

<script>
//注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

最后显示却是:无法显示二级菜单,也没有下面的滑块。

解决办法:是因为少了一句代码:正确的js如下

还需要注意一点的是,这个js必须放在最后。

Layui是一款轻量级的前端UI框架,它提供了丰富的组件和模块,可以快速地开发出美观、易用的Web应用程序。下面是一个使用Layui实现二级菜单的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui二级菜单示例</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">Layui二级菜单示例</div> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">菜单1</a> <dl class="layui-nav-child"> <dd><a href="">菜单1</a></dd> <dd><a href="">菜单2</a></dd> <dd><a href="">菜单3</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">菜单2</a> <dl class="layui-nav-child"> <dd><a href="">菜单4</a></dd> <dd><a href="">菜单5</a></dd> <dd><a href="">菜单6</a></dd> </dl> </li> </ul> </div> </div> <div class="layui-body"> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">欢迎页</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">欢迎使用Layui二级菜单示例</div> </div> </div> </div> <div class="layui-footer"> © 2021 Layui二级菜单示例 </div> </div> <script src="layui/layui.js"></script> <script> layui.use('element', function(){ var element = layui.element; //监听导航点击 element.on('nav(test)', function(elem){ //获取菜单的数据 var childData = elem.children('.layui-nav-child'); //如果菜单存在,则阻止跳转 if (childData.length > 0) { return false; } }); }); </script> </body> </html> ``` 在上面的示例中,使用了Layui菜单组件和选项卡组件来实现二级菜单效果。菜单组件通过`layui-nav`和`layui-nav-child`来设置菜单项和菜单项,选项卡组件通过`layui-tab`和`layui-tab-title`来设置选项卡标签和`layui-tab-item`来设置选项卡内容。 同时,在JavaScript代码中,使用了Layui的元素模块来监听导航菜单的点击事件,并通过判断菜单是否存在来阻止跳转。这样就可以实现二级菜单的效果。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值