折叠div块儿功能示例(代码):
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠div块儿功能示例</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/chosen/1.8.2/chosen.css" rel="stylesheet">
<base target="_blank">
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-weight: 100
}
h1 {
font-size: 30px
}
h2 {
font-size: 24px
}
h3 {
font-size: 16px
}
h4 {
font-size: 14px
}
h5 {
font-size: 12px
}
h6 {
font-size: 10px
}
h3, h4, h5 {
margin-top: 5px;
font-weight: 600
}
a:focus {
outline: 0
}
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden
}
a {
cursor: pointer
}
a:focus, a:hover {
text-decoration: none
}
.border-bottom {
border-bottom: 1px solid #e7eaec !important
}
.b-r {
border-right: 1px solid #e7eaec
}
.wrapper {
padding: 0 20px
}
.wrapper-content {
padding: 20px
}
.ibox-content h1, .ibox-content h2, .ibox-content h3, .ibox-content h4, .ibox-content h5, .ibox-title h1, .ibox-title h2, .ibox-title h3, .ibox-title h4, .ibox-title h5 {
margin-top: 5px
}
.ibox {
clear: both;
margin-bottom: 25px;
margin-top: 0;
padding: 0
}
.ibox.collapsed .ibox-content {
display: none
}
.ibox:after, .ibox:before {
display: table
}
.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #fff;
border-color: #e7eaec;
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
border-style: solid solid none;
border-width: 4px 0 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
min-height: 48px
}
.ibox-content {
background-color: #fff;
color: inherit;
padding: 15px 20px 20px;
border-color: #e7eaec;
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
border-style: solid solid none;
border-width: 1px 0
}
.ibox-content {
clear: both
}
.ibox-title h5 {
display: inline-block;
font-size: 14px;
margin: 0 0 7px;
padding: 0;
text-overflow: ellipsis;
float: left
}
.ibox-tools {
display: inline-block;
float: right;
margin-top: 0;
position: relative;
padding: 0
}
.ibox-tools a {
cursor: pointer;
margin-left: 5px;
color: #c4c4c4
}
.gray-bg {
background-color: #f3f3f4
}
.white-bg {
background-color: #fff
}
.dashboard-header {
border-top: 0;
padding: 20px
}
.dashboard-header h2 {
margin-top: 10px;
font-size: 26px
}
#back-top {
position: fixed;
width: 44px;
height: 44px;
bottom: 80px;
right: 0px;
background: #ccc;
text-align: center;
line-height: 44px;
text-decoration: none;
opacity: 0.8;
color: black;
}
@media (max-width: 768px) {
.sidebar-content .wrapper {
padding-right: 0;
z-index: 1
}
.ibox-tools {
float: none;
text-align: right;
display: block
}
.ibox-tools {
float: none;
text-align: left;
display: inline-block
}
}
</style>
</head>
<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-sm-12 text-center">
<span style="color: #1ab394; font-size: 20px; font-weight: 700">折叠div块儿功能示例 - HTML</span>
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>块儿001</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content" style="width: 100%;">
<div class="row">
<div class="col-sm-6 b-r" style="height:422px;width: 100%;text-align: center;">
<span style="text-align: center;line-height: 422px;">暂无数据</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>块儿002</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content" style="width: 100%;">
<div class="row">
<div class="col-sm-6 b-r" style="height:422px;width: 100%;text-align: center;">
<span style="text-align: center;line-height: 422px;">暂无数据</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="back-top">Top</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/chosen/1.8.2/chosen.jquery.js"></script>
<script>
// 折叠
if ($(".tooltip-demo").tooltip({selector: "[data-toggle=tooltip]", container: "body"}),
$(".modal").appendTo("body"),
$("[data-toggle=popover]").popover(),
$(".collapse-link").click(
function () {
var o = $(this).closest("div.ibox"), e = $(this).find("i"), i = o.find("div.ibox-content");
i.slideToggle(200), e.toggleClass("fa-chevron-up").toggleClass("fa-chevron-down"),
o.toggleClass("").toggleClass("border-bottom"), setTimeout(
function () {
o.resize(), o.find("[id^=map-]").resize()
}, 50)
}), top == this) {
}
// Top
$(function () {
$('#back-top').hide();
$(window).scroll(function () {
if ($(window).scrollTop() > 420) {
$('#back-top').fadeIn(500);
} else {
$("#back-top").fadeOut(500);
}
});
$("#back-top").click(function () {
$('body').animate({
scrollTop: '0'
}, 600);
return false;
})
});
$(function () {
//先将#back-top隐藏
$('#back-top').hide();
//当滚动条的垂直位置距顶部100像素一下时,跳转链接出现,否则消失
$(window).scroll(function () {
if ($(window).scrollTop() > 500) {
$('#back-top').fadeIn(500);
} else {
$("#back-top").fadeOut(500);
}
});
//点击跳转链接,滚动条跳到0的位置,页面移动速度是1000
$("#back-top").click(function () {
$('body').animate({
scrollTop: '0'
}, 600);
return false; //防止默认事件行为
})
});
</script>
</body>
</html>