web组件之下拉菜单（CSS3手风琴效果）

关于下拉菜单，大家应该都不陌生，html里有select标签，就可以提供下拉效果，也可以结合ul ol 有序、无序的列表做一些定制的下拉列表，今天和大家讲解一下jQuery+css3，实现的下拉效果。（内附js的版本，奈何js做出来的动画效果实在不咋地，所以之做给大家参考。）

在jQuery中有一个上卷下拉的方法:slideToggle()，动画效果相当棒，慕课网的jQuery教程里也有相关讲解，感兴趣的小伙伴可以研究一下。

jQuery版本main.js 代码如下

$(function(){
 var PutDon = function(el,tag){
 this.el = el || {};
 this.tag = tag || false;
 var link = this.el.find('.link');
 link.on('click', {el: this.el, tag: this.tag}, this.dropDon)
 //console.log(link);
 }
 PutDon.prototype = {
 dropDon:function(e){
 var $el = e.data.el,
 $tag = e.data.tag,
 $this = $(this),
 $next = $this.next();
 //console.log($next);
 $next.slideToggle();
 $this.parent().toggleClass('open');
  if(!$tag){
  $el.find('.desc').not($next).slideUp().parent().removeClass('open');
 }
 }
 }
 var putdon = ne PutDon($('.container'),false);
})

Javascript版本index_1.js 代码如下

function g(oid){
 if(!document.getElementsByClassName) return false;
 return document.getElementsByClassName(oid);
}
;(function(){
 var container = g('link');
 var tag = null;
 console.log(container.length);
 for(var i = 0;i
Html代码如下



 
 
 
 
 
 


 
 

  

  Html
  

   
Html
   
Css
  
  
  

  Javascript
  

   
Javascript
   
JQuery
   
Zepto
   
Require
  
  
  

  Broser
  

   
Firefox
   
Chrome
   
Safari
  
  
  

  Author
  

   
Walk Monkey
   
Marlboro
  
  
 





演示地址
https://marlborokay.github.io/slideDon/
main.js 接口地址
https://github./marlboroKay/slideDon