layui导航栏二级菜单

layui导航栏二级菜单不显示问题

关于layui导航栏官网有详细使用方法,但直接复制往往会出现二级菜单不显示的问题,今天解决了这个问题,记录一下学习过程。

1.引入js和css文件

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js" charset="utf-8"></script>

2.代码

<ul class="layui-nav layui-nav-tree" lay-filter="demo"><li class="layui-nav-item layui-nav-itemed"><ahref="javascript:;">所有图书</a><dl class="layui-nav-child"><dd><a href="javascript:;">小说</a></dd><dd><a href="javascript:;">散文</a></dd><dd><a href="javascript:;">诗歌</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">登记图书</a><dl class="layui-nav-child"><dd><a href="">归还图书登记</a></dd><dd><a href="">丢失图书登记</a></dd></dl></li>
</ul>

3.element模块

<script>layui.use('element', function() {var element = layui.element(); //导航的hover效果、二级菜单等功能,需要依赖element模块});</script>