layui侧边栏折叠和展开效果该怎么实现

 我来答
游戏放松小助手
高粉答主

2020-04-21 · 我是游戏小达人,乐于助人
游戏放松小助手
采纳数:32 获赞数:76892

向TA提问 私信TA
展开全部

1、首先引入layui的样式代码。

2、然后创建html代码,添加上layui的导航样式,layui-nav。

3、运行页面,这时就可以看到一个美观的导航菜单了。

4、现在的菜单右边有很多空白的地方,可以添加样式,为导航栏条目添加长度,让其布满页面。添加一个样式,注意样式名和刚才默认的样式名一样。添加width:25%的样式。

5、再次运行页面,现在导航栏的条目布满了,没有留下过多的空白了。

小熙ps
2016-11-27 · 知道合伙人软件行家
小熙ps
知道合伙人软件行家
采纳数:966 获赞数:9282
毕业于湖南信息职业技术学院,专业计算机网络技术,在IT领域已经专注3年,对各种IT行业都有所了解 。

向TA提问 私信TA
展开全部
  <ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></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>
</ul>
layui.use(['element'], function(){
var element = layui.element();})
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
clyf1986
2018-05-21
知道答主
回答量:11
采纳率:0%
帮助的人:2.9万
展开全部
$(".layui-nav-tree .layui-nav-item").click(function(){
$(".layui-nav-tree .layui-nav-item").removeClass("layui-nav-itemed").removeClass("layui-this");
$(this).addClass($(this).has('dl').length ? "layui-nav-itemed" : "layui-this");
});
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百变小樱fly
2017-12-25
知道答主
回答量:3
采纳率:0%
帮助的人:2370
引用小熙ps的回答:
  <ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></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>
</ul>
layui.use(['element'], function(){
var element = layui.element();})
展开全部
layui.element不是一个function
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 2条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式