当前位置: 萬仟网 > 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>

 

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

相关文章:

  • jQuery简介

    一.jQuery是什么: 它是一个轻量级的JavaScript库。所以遵循JavaScript语法,并具有自身的特点。 二.jQuery的优势: (... [阅读全文]
  • jquery的api以及用法总结-选择器

    jQuery API及用法总结 选择器 基本选择器 1. \ 通用选择器 2. .class 类选择器,一个元素可以有多个类(chrome使用原生j... [阅读全文]
  • 关于json时间数据格式转换与修改

    使用easyui获取JSON时间数据时间数据时,通常是一长串的数字而不是我们想要的类似2018-11-01的普通时间格式。 此时我们就需要使用到关于... [阅读全文]
  • 互联网公司常用水平导航(二级导航)

    互联网公司常用水平导航(二级导航)

    效果图 index.html <!DOCTYPE html> <html lang="en"> <he... [阅读全文]
  • jquery获取select多选框选中的值

    select下拉框选中的值,用jquery大家应该都会获取, 如果select是多选的,也这么获取的话,则只能获取到第一个选项的value值,但是有... [阅读全文]
  • jQuery:无焦点轮播图,鼠标经过停止,移开继续

    jQuery:无焦点轮播图,鼠标经过停止,移开继续首先每个图片的宽度都是100%,高度500px,一共4个图片。... [阅读全文]
  • Jquery学习笔记(一)

    一.Jquery的基本功能 二.Jquery选择器 主要分为四种,分别是基本选择器,层次选择器,过滤选择器,和表单选择器,其中当属基本选择器用途最广... [阅读全文]
  • jQuery属性操作之.attr()

    转载请注明出处 @[toc] .attr() 1. .attr() 的四种用法 大致用法: 调用形式:$("xxx").attr(attrName)... [阅读全文]
  • 网站活动秒杀倒计时

    今天做移动端商城时候得,需要哥秒杀计时器,从后台获取了时间以后,前台做相应的判断。需要的可以直接拿去用,本人只精确到了x天x小时x分钟x秒。其他需要... [阅读全文]
  • jQuery toastr提示简单实现

    注:在学校平时做的小项目跳页都是用 Response.Write写脚本弹窗并跳页,每次点击登录成功,注册成功......然后点击确定,太麻烦了,这次... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com