当前位置: 萬仟网 > IT编程>开发语言>Jquery > layui中折叠面板的使用

layui中折叠面板的使用

2018年04月25日  | 萬仟网IT编程  | 我要评论
运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item"> <div class="layui-colla-title" style="background-color: #e ...

运用折叠面板后 可以让页面更加整洁

有什么不懂的可以留言

代码放到底部

需要引入的文件

JQuery代码:

 

html代码

 

 

 

<div class="layui-colla-item">
<div class="layui-colla-title" style="background-color: #e2e2e2; font: 17px!important; font-weight: bold">签到成功的学生</div>
<div class="layui-colla-content">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6 mb">
<div class="content-panel pn layui-bg-blue" style="height: 250px">
<div id="profile-02">
<div class="user">
<a href="../img/15310320417.jpg">
<img src="../img/15310320417.jpg" class="img-circle" width="100" height="100"></a>
<br />
<br />
<p style="color: white; font-weight: bold; font-size: 20px">417&nbsp王大昭<%#Eval("StuID")%></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
layui.use(['element', 'layer'], function () {
var element = layui.element();
var layer = layui.layer;

//监听折叠
element.on('collapse(test)', function (data) {
layer.msg('展开状态:' + data.show);
});
});
</script>

 

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1