jquery实现手风琴式折叠时间线效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现手风琴式折叠时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
body {
    padding: 10px;
/* background-color: cadetblue; */
}
.box {
border: 1px solid black;

background-color: #34495e;
margin: auto;
}
.foldDivs {
display: none;
}
.content>div {
float: left;
}
.title {
width: 100%;
text-align: center;
padding: 10px;
font-size: 18px;
background-color: #413d3d;
color: white;
}
.content {
width: 100%;
height: 180px;
/* background-color: black; */
}
.content-left {
width: 49%;
height: 100%;
position: relative;
/* background-color: blanchedalmond; */
overflow: hidden;
}
.line {
height: 100%;
width: 2%;
position: relative;
/* background-color: #d9d9d9; */
overflow: hidden;
}
.content-right {
height: 100%;
width: 49%;
position: relative;
/* background-color: #8f8888; */

}
.midden-line {
width: 3px;
height: 100%;
background-color: rgb(127, 168, 255);
margin: auto;
position: relative;
}
.node {
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
border: 3px solid #f1c40f;
}

.content-left .content-left-box {
width: 70%;
height: 90%;
/* background-color: cornflowerblue; */
position: absolute;
top: 50%;
left: 62%;
transform: translate(-50%,-50%);
border-radius: 5px;
}
.content-right .content-right-box {
width: 70%;
height: 90%;
/* background-color: cornflowerblue; */
position: absolute;
top: 50%;
right: 62%;
transform: translate(50%,-50%);
border-radius: 5px;
}

.box-title {
background-color: #2980b9;
height: 22%;
padding-top: 10%;
width: 100%;
padding: 3px 5px;
border-radius: 5px 5px 0 0;
position: absolute;
top: 0;
left: 0;
color: white;
text-align: center;
}
.box-content {
height: 78%;
width: 100%;
background-color: #3498db;
color: white;
position: absolute;
top: 22%;
left: 0;
border-radius: 0 0 5px 5px;
padding: 5px 8px;
display: none;
}

/*------------------------*/
.msg-right {
display: block;
width: 0px;
height: 0px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid #2980b9;
border-right: 8px solid rgba(0,0,0,0);
border-color: none;
position: absolute;
right: -15px;
top: 30%;
}
.msg-left {
display: block;
width: 0px;
height: 0px;
border-top: 8px solid rgba(0,0,0,0);
border-bottom: 8px solid rgba(0,0,0,0);
border-left: 8px solid rgba(0,0,0,0);
border-right: 8px solid #2980b9;
border-color: none;
position: absolute;
left: -15px;
top: 30%;
}
</style>

</head>
<body>
<div class="box">

</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script>

$(".box").on("click", ".fold", function() {
var title = $(this);
var hiden = $(this).next().is(":hidden");
title.next().slideToggle();
setTimeout(function() {
console.log(hiden);
if (hiden) {
title.next().find(".box-content").slideDown();
} else {

title.next().find(".box-content").slideUp();
}

},
100);
});
var styleObj = new Object();
var conObj = new Object();
function settingOption(option) {

styleObj = eval('option.style');

conObj = eval('option.content');
// console.log(conObj);

// 循环内容对象
$.each(conObj, function() {
// foldDivs 里面的主体内容
var content = "";

// 左边栏内容
var contentLeft = "";
// 右边栏内容
var contentRight = "";
// 获取当前集合
var curist = $(this);
// 遍历当前集合
for (var i = 0; i < curist.length; i++) {
// console.log(curist[i]);
// 获取节点类型
var nodeType = curist[i].type;

if (nodeType == 'head') {
var nodeTitle = curist[i].title;
$(
"<div class='title fold'>"+
nodeTitle +
"</div>"
).appendTo(".box");

} else if (nodeType == 'body') {
// 获取侧边栏标题
var nodeTitle = curist[i].contentTitle;
// 获取侧边栏内容
var contentBody = curist[i].contentBody;
// 获取显示的方向
var showDirection = curist[i].showDirection;



// 判断是否为左侧或者两侧都显示
contentLeft = duagLeft(showDirection, nodeTitle, contentBody);

// 判断是否为右侧或者两侧都显示
contentRight = duagRight(showDirection, nodeTitle, contentBody);

// 组合co.........完整代码请登录后点击上方下载按钮下载查看