话不多说直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//换成自己本地的路径
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
//换成自己本地的路径
<script src="js/layui/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
//换成自己本地的路径
<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.layui-row {
width: 62.5%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
<ul class="layui-nav layui-nav-tree" lay-filter="test" style="width: 90%;">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" id="menu_three">选项3</a>
<ol class="layui-nav-child">
<li><a href="javascript:;">邮件管理2</a></li>
<li><a href="javascript:;">消息管理2</a></li>
<li><a href="javascript:;">授权管理2</a></li>
</ol>
</li>
</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>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
</div>
</div>
<script>
layui.use('element', function() {
var element = layui.element;
$("#menu_three").on("click", function() {
$(this).next().toggle();
var tClass= $(this).parent().attr("class");
if(tClass=="layui-nav-item layui-nav-itemed")
{
$(this).children(".layui-nav-more").css({"border-color":"transparent transparent #fff","top":"14px"})
}else{
$(this).children(".layui-nav-more").css({'border-color':'#fff transparent transparent','top':'20px'})
}
})
});
</script>
</body>
</html>
