超酷炫 CSS3垂直手风琴菜单

 -webkit-transform: rotate(180deg);   
 -ms-transform: rotate(180deg);   
 -o-transform: rotate(180deg);   
 transform: rotate(180deg);   
}   
  
/**  
 * Submenu  
 —————————–*/  
 .submenu {   
  display: none;   
  background: #444359;   
  font-size: 14px;   
 }   
  
 .submenu li {   
  border-bottom: 1px solid #4b4a5e;   
 }   
  
 .submenu a {   
  display: block;   
  text-decoration: none;   
  color: #d9d9d9;   
  padding: 12px;   
  padding-left: 42px;   
  -webkit-transition: all 0.25s ease;   
  -o-transition: all 0.25s ease;   
  transition: all 0.25s ease;   
 }   
  
 .submenu a:hover {   
  background: #b63b4d;   
  color: #FFF;   
 }    

jQuery代码：

JavaScript Code复制内容到剪贴板

 $(function() {   
 var Accordion = function(el, multiple) {   
  this.el = el || {};   
  this.multiple = multiple || false;   
  
  // Variables privadas   
  var links = this.el.find(‘.link’);   
  // Evento   
  links.on(‘click’, {el: this.el, multiple: this.multiple}, this.dropdown)   
 }   
  
 Accordion.prototype.dropdown = function(e) {   
  var $el = e.data.el;   
   $this = $(this),   
   $next = $this.next();   
  
  $next.slideToggle();   
  $this.parent().toggleClass(‘open’);   
  
  if (!e.data.multiple) {   
   $el.find(‘.submenu’).not($next).slideUp().parent().removeClass(‘open’);   
  };   
 }