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

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

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

jQuery版本：main.js 代码如下：

$(function(){
    var PutDown = 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.dropDown)
 //console.log(link);
    }
    PutDown.prototype = {
 dropDown: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 putdown = new PutDown($('.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
  
     
     

  Browser
  

      
Firefox
      
Chrome
      
Safari
  
     
     

  Author
  

      
Walk Monkey
      
Marlboro
  
     
 





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