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

话不多说，请看代码：

成都创新互联公司是一家集网站建设,汉阴企业网站建设,汉阴品牌网站建设,网站定制,汉阴网站建设报价,网络营销,网络优化,汉阴网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。




 
 手风琴-支持横纵向调用-原生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}

参数	默认值	说明
direction	"x"	设置横向展开{direction: "x"},设置纵向展开{direction: "y"}
expose	30	设置隐藏体可是区大小{expose: 30}默认单位为px
speed	30	设置运动速度{speed: 100}

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

分享文章：原生js实现手风琴功能（支持横纵向调用）
转载来源：http://cqcxhl.com/article/pojigg.html

重庆分公司，新征程启航

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

调用方法：

options参数

其他资讯