新增 dropdown 菜单组折叠动画效果

src/css/layui.css

@@ -1201,7 +1201,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 .layui-menu li,
 .layui-menu-body-title,
 .layui-menu-body-title a{padding: 5px 15px; color: initial}
-.layui-menu li{position: relative; margin: 1px 0; line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
+.layui-menu li{position: relative; margin: 0 0 1px; line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
 .layui-menu li:hover{background-color: #f8f8f8; }
 .layui-menu li.layui-disabled,
 .layui-menu li.layui-disabled *{background: none !important; color: #d2d2d2 !important; cursor: not-allowed !important;}
@@ -1224,6 +1224,8 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 .layui-menu .layui-menu-item-down:hover{cursor: pointer;}
 .layui-menu .layui-menu-item-up>.layui-menu-body-title{ color: rgba(0,0,0,.8);}
 .layui-menu .layui-menu-item-up>ul{visibility: hidden; height: 0; overflow: hidden;}
+.layui-menu .layui-menu-item-down>.layui-menu-body-title>.layui-icon-down{transform: rotate(180deg);}
+.layui-menu .layui-menu-item-up>.layui-menu-body-title>.layui-icon-up{transform: rotate(-180deg);}
 .layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon,
 .layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon{color: rgba(0,0,0,1);}
 .layui-menu .layui-menu-item-down>ul{visibility: visible; height: auto;}
@@ -1237,7 +1239,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 .layui-menu-body-title{position: relative; margin: -5px -15px; overflow: hidden; text-overflow: ellipsis;}
 .layui-menu-body-title a{display: block; margin: -5px -15px; color: rgba(0,0,0,.8);}
 .layui-menu-body-title a:hover{transition: all .3s;}
-.layui-menu-body-title>.layui-icon{position: absolute; right: 15px; top: 50%; margin-top: -6px; line-height: normal; font-size: 14px;}
+.layui-menu-body-title>.layui-icon{position: absolute; right: 15px; top: 50%; margin-top: -6px; line-height: normal; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;}
 .layui-menu-body-title>.layui-icon:hover{transition: all .3s;}
 .layui-menu-body-title>.layui-icon-right{right: 14px;}
 .layui-menu-body-panel{display: none; position: absolute; top: -7px; left: 100%; z-index: 1000; margin-left: 13px; padding: 5px 0;}

src/modules/dropdown.js

@@ -102,7 +102,8 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
     isSpreadItem: true, // 是否初始展开子菜单
     data: [], // 菜单数据结构
     delay: 300, // 延迟关闭的毫秒数，若 trigger 为 hover 时才生效
-    shade: 0 // 遮罩
+    shade: 0, // 遮罩
+    accordion: false // 手风琴效果，仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
   };
   
   // 重载实例
@@ -343,12 +344,12 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
     
     // 触发菜单组展开收缩
     that.elemView.find(STR_GROUP_TITLE).on('click', function(e){
-      var othis = $(this)
+      var othis = $(this);
-      ,elemGroup = othis.parent()
+      var elemGroup = othis.parent();
-      ,data = elemGroup.data('item') || {}
+      var data = elemGroup.data('item') || {};
       
       if(data.type === 'group' && options.isAllowSpread){
-        thisModule.spread(elemGroup);
+        thisModule.spread(elemGroup, options);
       }
     });
 
@@ -442,17 +443,36 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
   };
   
   // 设置菜单组展开和收缩状态
-  thisModule.spread = function(othis){
+  thisModule.spread = function(othis, options){
-    // 菜单组展开和收缩
     var needSpread = othis.hasClass(STR_ITEM_UP);
-    var elemIcon = othis.children('.'+ STR_MENU_TITLE).find('.layui-icon-' + (needSpread ? 'down' : 'up'));
+    var accordion = options
-    if(needSpread){
+      ? options.accordion
-      othis.removeClass(STR_ITEM_UP).addClass(STR_ITEM_DOWN);
+      : typeof othis.parents('.layui-menu').eq(0).attr('lay-accordion') === 'string';
-      elemIcon.removeClass('layui-icon-down').addClass('layui-icon-up');
+
-    } else {
+    var toggle = function (groupElem, isOpen) {
-      othis.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP);
+      var contentElem = groupElem.children('ul');
-      elemIcon.removeClass('layui-icon-up').addClass('layui-icon-down');
+      var contentHeight = contentElem[0].scrollHeight;
+
+      groupElem.removeClass(isOpen ? STR_ITEM_UP : STR_ITEM_DOWN).addClass(isOpen ? STR_ITEM_DOWN : STR_ITEM_UP);
+      contentElem.height(isOpen ? 0 : contentHeight)
+        .stop()
+        .animate({
+          opacity: isOpen ? 1 : 0, 
+          height: isOpen ? contentHeight : 0
+        }, 200, function(){
+          contentElem.css({ height: '', opacity: '' })
+        })
     }
+
+    toggle(othis, needSpread);
+
+    if (!needSpread || !accordion) return;
+    othis.siblings('.' + STR_ITEM_GROUP).each(function (index, item) {
+      var itemElem = $(item)
+      if(!itemElem.hasClass(STR_ITEM_UP)){
+        toggle(itemElem, false);
+      }
+    })
   };
   
   // 全局事件