当前位置： 移动技术网 > IT编程>开发语言>Jquery > layui中折叠面板的使用

layui中折叠面板的使用

2018年04月25日  | 移动技术网IT编程  | 我要评论

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

有什么不懂的可以留言

代码放到底部

需要引入的文件

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网