From 5a2baf9375ef80ee78fb66493418314302b32779 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Sun, 22 Jun 2025 22:10:35 +0800 Subject: [PATCH] =?UTF-8?q?refactor(collapse):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E6=8A=98=E5=8F=A0=E9=9D=A2=E6=9D=BF=E7=BB=84=E4=BB=B6=20(#2734?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/panel/index.md | 4 +- examples/collapse.html | 89 ++++++++++++++++++++++++++++++++++++++++++ examples/element.html | 37 ++---------------- src/css/layui.css | 3 +- src/modules/element.js | 45 ++++++++++++++------- 5 files changed, 127 insertions(+), 51 deletions(-) create mode 100644 examples/collapse.html diff --git a/docs/panel/index.md b/docs/panel/index.md index b7f70b0c..8622b9f6 100644 --- a/docs/panel/index.md +++ b/docs/panel/index.md @@ -57,8 +57,8 @@ toc: true
Collapse Title 1
-
-

Content 1

+
+

Content 1 （添加 layui-show 类设置初始展开）

diff --git a/examples/collapse.html b/examples/collapse.html new file mode 100644 index 00000000..4b60e005 --- /dev/null +++ b/examples/collapse.html @@ -0,0 +1,89 @@ + + + + + + 折叠面板 - Layui + + + +

常规用法：


+
+
+

item 1

+
+ 旧版，通过给列表的内容添加 layui-show 类开启显示 +
+
+
+

item2

+
+ content 2 +
+
+
+

item 3

+
+ content 3 +
+
+
+ +
+ +
+
+

item 111

+
+ 新版 2.11.4+，通过给列表项直接添加 layui-show 类开启显示 +
+
+
+

item 222

+
+ content 2 +
+
+
+

item 333

+
+ content 3 +
+
+
+ + +

开启手风琴：


+
+
+

item 1

+
+ 旧版，通过给列表的内容添加 layui-show 类开启显示 +
+
+
+

item2

+
+ content 2 +
+
+
+

item 3

+
+ content 3 +
+
+
+ + + + + diff --git a/examples/element.html b/examples/element.html index 77488273..5bf348a1 100644 --- a/examples/element.html +++ b/examples/element.html @@ -68,30 +68,7 @@ body{padding:20px;} Hot -
- -
-
-

杜甫

-
-

杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。

-
-
-
-

李清照

-
-

李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。

-
-
-
-

鲁迅

-
-

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。

-
-
-
- -

+

@@ -174,19 +151,11 @@ body{padding:20px;} 灰色分割线
- - - diff --git a/src/css/layui.css b/src/css/layui.css index 14a14745..d3c5536a 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -578,7 +578,8 @@ a cite{font-style: normal;} .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: 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-colla-item.layui-show > .layui-colla-title .layui-colla-icon{transform: rotate(90deg);} +.layui-colla-item.layui-show > .layui-colla-content{display: block;} /* 卡片面板 */ .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 98273279..d7f24d6f 100644 --- a/src/modules/element.js +++ b/src/modules/element.js @@ -14,9 +14,6 @@ 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 = {}; @@ -419,20 +416,35 @@ layui.define('jquery', function(exports) { var thisItemElem = othis.parent(CLASS_ITEM); var thisContentElem = othis.siblings(CLASS_CONTENT); var isNone = thisContentElem.css('display') === 'none'; + var isAccordion = typeof wrapper.attr('lay-accordion') === 'string'; - // 是否手风琴 - 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); - }); - } + // 动画执行完成后的操作 + var complete = function() { + $(this).css('display', ''); // 剔除动画生成的 style display，以适配外部样式的状态重置 + }; + + // 是否正处于动画中的状态 + if (thisContentElem.is(':animated')) return; // 展开或收缩 - thisItemElem[isNone ? 'addClass' : 'removeClass'](CONST.CLASS_COLLAPSE_EXTEND); - thisContentElem[isNone ? 'slideDown' : 'slideUp'](ANIM_MS); + if (isNone) { + // 先执行 slideDown 动画，再标注展开状态样式，避免元素 `block` 状态导致动画无效 + thisContentElem.slideDown(ANIM_MS, complete); + thisItemElem.addClass(SHOW); + } else { + // 先取消展开状态样式，再将元素临时显示，避免 `none` 状态导致 slideUp 动画无效 + thisItemElem.removeClass(SHOW); + thisContentElem.show().slideUp(ANIM_MS, complete); + } + // 是否开启手风琴 + if (isAccordion) { + var itemSiblings = thisItemElem.siblings('.'+ SHOW); + itemSiblings.removeClass(SHOW); + itemSiblings.children(CLASS_CONTENT).show().slideUp(ANIM_MS, complete); + } + + // 事件 layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', { title: othis, content: thisContentElem, @@ -644,7 +656,12 @@ layui.define('jquery', function(exports) { // 初始状态 elemTitle.find('.layui-colla-icon').remove(); elemTitle.append(''); - othis[isNone ? 'removeClass' : 'addClass'](CONST.CLASS_COLLAPSE_EXTEND); + othis[isNone ? 'removeClass' : 'addClass'](SHOW); + + // 兼容旧版（ < 2.11.3） + if (elemCont.hasClass(SHOW)) { + elemCont.removeClass(SHOW); + } // 点击标题 elemTitle.off('click', call.collapse).on('click', call.collapse);