话不多说，请看代码：
<Meta charset="UTF-8">
手风琴-<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>横纵向<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>-原生js封装
css-3*/
white-space: -moz-pre-wrap; /*Mozilla,since1999*/
white-space: -pre-wrap; /*Opera4-6*/
white-space: -o-pre-wrap; /*Opera7*/
word-wrap: break-word; /*InternetExplorer5.5+*/
}
.example{
padding-top:40px;
margin-bottom:90px;
}
.example .call{
padding:18px 5px;
background:#f0f5f8;
}
.example h2{
padding-top:20px;
margin-bottom:7px;
}
.example table {
width:100%;
table-layout:fixed;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #cee1ee;
border-left: 0;
}
.example thead {
border-bottom: 1px solid #cee1ee;
background-color: #e3eef8;
}
.example tr {
line-height: 24px;
font-size: 13px;
}
.example tr:nth-child(2n) {
background-color: #f0f5f8;
}
.example tr th,.example tr td {
border-left: 1px solid #cee1ee;
word-break: break-all;
word-wrap: break-word;
padding:0 10px;
font-weight: normal;
}
.example tr th {
color: #555;
padding-top: 2px;
padding-bottom: 2px;
text-align: left;
}
/*公共*/
.accordion-container {
height: 200px;
margin: 20px auto;
/*border: 1px solid #ccc;*/
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.accordion-list{
position: absolute;
left: 0;
width: 150px;
border-left: 1px solid #ccc;
height: 100%;
/*-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear;*/
}
/*.accordion-container li:last-child{
border:none;
}*/
.accordion-container2{
width: 500px;
border-top:none;
}
.accordion-container2 .accordion-list{
width: 100%;
height: 100px;
border-top: 1px solid #ccc;
}
说明
dion-container" id="accordion">
- dion-list">1
- dion-list">2
- dion-list">3
- dion-list">4
- dion-list">5
dion-container" id="accordion1">
- dion-list">1
- dion-list">2
- dion-list">3
- dion-list">4
- dion-list">5
执行默认参数，设置横向展开{direction: "x"}，设置隐藏体可是区大小{expose: 50}默认单位为px，鼠标点击预览图切换
dion-container accordion-container2" id="accordion2">
- dion-list">1
- dion-list">2
- dion-list">3
- dion-list">4
- dion-list">5
- dion-list">6
执行默认参数，设置纵向展开{direction: "y"}，设置隐藏体可是区大小{expose: 30}默认单位为px，鼠标点击预览图切换
dion-container accordion-container2" id="accordion3">
- dion-list">1
- dion-list">2
- dion-list">3
- dion-list">4
执行默认参数，设置纵向展开{direction: "y"}，设置隐藏体可是区大小{expose: 30}默认单位为px，设置运动速度{speed: 100}，鼠标点击预览图切换