From 9023ae9e6fa41db8ba2cc3e69f6945a541f51f57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
 <3277200+sentsim@users.noreply.github.com>
Date: Mon, 16 Jun 2025 09:31:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(collapse):=20=E6=96=B0=E5=A2=9E=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E9=9D=A2=E6=9D=BF=E5=B1=95=E5=BC=80=E5=92=8C=E6=94=B6?=
 =?UTF-8?q?=E7=BC=A9=E6=97=B6=E7=9A=84=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/layui.css      |  3 +-
 src/modules/element.js | 65 ++++++++++++++++++++++++------------------
 2 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/css/layui.css b/src/css/layui.css
index d9f3a20c..14a14745 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -577,7 +577,8 @@ a cite{font-style: normal;}
 .layui-colla-item:first-child{border-top: none;}
 .layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden;}
 .layui-colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #5F5F5F;}
-.layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}
+.layui-colla-icon{position: absolute; left: 15px; top: 50%; margin-top: -7px; font-size: 14px; line-height: normal; transition: all .2s;}
+.layui-collapse-item-expand > .layui-colla-title .layui-colla-icon{transform: rotate(90deg);}
 
 /* 卡片面板 */
 .layui-card{margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
diff --git a/src/modules/element.js b/src/modules/element.js
index 0a6f1ee2..98273279 100644
--- a/src/modules/element.js
+++ b/src/modules/element.js
@@ -14,6 +14,9 @@ layui.define('jquery', function(exports) {
   var THIS = 'layui-this';
   var SHOW = 'layui-show';
   var TITLE = '.layui-tab-title';
+  var CONST = {
+    CLASS_COLLAPSE_EXTEND: 'layui-collapse-item-expand'
+  };
 
   var Element = function(){
     this.config = {};
@@ -404,28 +407,36 @@ layui.define('jquery', function(exports) {
     }
 
     // 折叠面板
-    ,collapse: function(){
+    ,collapse: function() {
       var othis = $(this);
-      var icon = othis.find('.layui-colla-icon');
-      var elemCont = othis.siblings('.layui-colla-content');
-      var parents = othis.parents('.layui-collapse').eq(0);
-      var filter = parents.attr('lay-filter');
-      var isNone = elemCont.css('display') === 'none';
+      var wrapper = othis.closest('.layui-collapse');
+      var filter = wrapper.attr('lay-filter');
+
+      var ANIM_MS = 200; // 动画过渡毫秒数
+      var CLASS_ITEM = '.layui-colla-item';
+      var CLASS_CONTENT = '.layui-colla-content';
+
+      var thisItemElem = othis.parent(CLASS_ITEM);
+      var thisContentElem = othis.siblings(CLASS_CONTENT);
+      var isNone = thisContentElem.css('display') === 'none';
 
       // 是否手风琴
-      if(typeof parents.attr('lay-accordion') === 'string'){
-        var show = parents.children('.layui-colla-item').children('.'+SHOW);
-        show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;');
-        show.removeClass(SHOW);
+      if (typeof wrapper.attr('lay-accordion') === 'string') {
+        var itemElems = wrapper.children(CLASS_ITEM);
+        itemElems.removeClass(CONST.CLASS_COLLAPSE_EXTEND);
+        itemElems.children(CLASS_CONTENT).slideUp(ANIM_MS, function() {
+          $(this).removeClass(SHOW);
+        });
       }
 
-      elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
-      icon.html(isNone ? '&#xe61a;' : '&#xe602;');
+      // 展开或收缩
+      thisItemElem[isNone ? 'addClass' : 'removeClass'](CONST.CLASS_COLLAPSE_EXTEND);
+      thisContentElem[isNone ? 'slideDown' : 'slideUp'](ANIM_MS);
 
       layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
-        title: othis
-        ,content: elemCont
-        ,show: isNone
+        title: othis,
+        content: thisContentElem,
+        show: isNone
       });
     }
   };
@@ -617,27 +628,27 @@ layui.define('jquery', function(exports) {
         });
       }
 
-      //折叠面板
-      ,collapse: function(elem){
+      // 折叠面板
+      ,collapse: function(elem) {
         var ELEM = 'layui-collapse';
         var targetElem = elem || $('.' + ELEM + elemFilter);
 
-        targetElem.each(function(){
-          var elemItem = $(this).find('.layui-colla-item')
-          elemItem.each(function(){
+        targetElem.each(function() {
+          var elemItem = $(this).find('.layui-colla-item');
+          elemItem.each(function() {
             var othis = $(this)
-            ,elemTitle = othis.find('.layui-colla-title')
-            ,elemCont = othis.find('.layui-colla-content')
-            ,isNone = elemCont.css('display') === 'none';
+            var elemTitle = othis.find('.layui-colla-title');
+            var elemCont = othis.find('.layui-colla-content');
+            var isNone = elemCont.css('display') === 'none';
 
-            //初始状态
+            // 初始状态
             elemTitle.find('.layui-colla-icon').remove();
-            elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '&#xe602;' : '&#xe61a;') +'</i>');
+            elemTitle.append('<i class="layui-icon layui-icon-right layui-colla-icon"></i>');
+            othis[isNone ? 'removeClass' : 'addClass'](CONST.CLASS_COLLAPSE_EXTEND);
 
-            //点击标题
+            // 点击标题
             elemTitle.off('click', call.collapse).on('click', call.collapse);
           });
-
         });
       }
     };