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

话不多说，请看代码：

 
 
 
 
 
 
 
 


 

 项目地址
 返回首页
 
 

 

  

  
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}
   
  
  
 
 

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