原生js实现手风琴功能（支持横纵向调用）

话不多说，请看代码：

 
 
 
 
 
 
 
 
 html{
  height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
 }
 ol, ul {
  list-style: none
 }
 body{
  position: relative;
  min-height:100%;
  font-size:14px;
  font-family: Tahoma, Verdana,"Microsoft Yahei";
  color:#333;
 }
 a{
  text-decoration: none;
  color:#333;
 }
 .header{
  width: 960px;
  padding-top: 15px;
  margin: 0 auto;
  line-height: 30px;
  text-align: right;
 }
 .header a{
  margin: 0 5px;
 }
 .main{
  width:960px;
  margin: 50px auto 0;
 }
 .code{
  border:1px dashed #e2e2e2;
  padding:10px 5px;
  margin-bottom:25px;
 }
 pre {
  font-family: "Microsoft Yahei",Arial,Helvetica;
  white-space: pre-wrap;  
  white-space: -moz-pre-wrap;  
  white-space: -pre-wrap;  
  white-space: -o-pre-wrap;  
  word-wrap: break-word; 
 }
 .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-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%;
  
 }
 
 .accordion-container2{
  width: 500px;
  border-top:none;
 }
 .accordion-container2 .accordion-list{
  width: 100%;
  height: 100px;
  border-top: 1px solid #ccc;
 }
 
 


 
 项目地址
 返回首页
 
 
 
  

  
1
  
2
  
3
  
4
  
5
  
 
 
 
  

  不传参数，执行默认参数，鼠标点击预览图切换
  
  
new accordion("#accordion");
 
 
  

  
1
  
2
  
3
  
4
  
5
  
 
 
 
  

  执行默认参数，设置横向展开{direction: "x"}，设置隐藏体可是区大小{expose: 50}默认单位为px，鼠标点击预览图切换
  
  
new accordion("#accordion1", {
  direction: "x",
  expose: 50
  });
 
 
  

  
1
  
2
  
3
  
4
  
5
  
6
  
 
 
 
  

  执行默认参数，设置纵向展开{direction: "y"}，设置隐藏体可是区大小{expose: 30}默认单位为px，鼠标点击预览图切换
  
  
new accordion("#accordion2", {
  direction: "y",
  expose: 30
  });
 
 
  

  
1
  
2
  
3
  
4
  
 
 
 
  

  执行默认参数，设置纵向展开{direction: "y"}，设置隐藏体可是区大小{expose: 30}默认单位为px，设置运动速度{speed: 100}，鼠标点击预览图切换
  
  
new accordion("#accordion3", {
  direction: "y",
  expose: 30,
  speed: 100
  });
 
 
  
  调用方法：
  
new accordion(selector,{options});
  
  options参数
  

  

   

   
参数
   
默认值
   
说明
   
  
  

   

   
direction
   
"x"
   
设置横向展开{direction: "x"},设置纵向展开{direction: "y"}
   
   

   
expose
   
30
   
设置隐藏体可是区大小{expose: 30}默认单位为px
   
   

   
speed
   
30
   
设置运动速度{speed: 100}
   
  
  
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！