lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-06-28 04:35:24 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(collapse): 重构折叠面板组件 (#2734)

Browse Source
This commit is contained in:
贤心 2025-06-22 22:10:35 +08:00 committed by GitHub
parent ece68e117e
commit 5a2baf9375
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 127 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/panel/index.md
View File

@ -57,8 +57,8 @@ toc: true
<div class="layui-collapse"> <div class="layui-collapse">
<div class="layui-colla-item"> <div class="layui-colla-item">
<div class="layui-colla-title">Collapse Title 1</div> <div class="layui-colla-title">Collapse Title 1</div>
<div class="layui-colla-content"> <div class="layui-colla-content layui-show">
<p>Content 1</p> <p>Content 1 （添加 layui-show 类设置初始展开）</p>
</div> </div>
</div> </div>
<div class="layui-colla-item"> <div class="layui-colla-item">

89
examples/collapse.html Normal file
View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>折叠面板 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body class="layui-padding-3">
<h2>常规用法：</h2><br>
<div class="layui-collapse" lay-filter="test">
<div class="layui-colla-item">
<h3 class="layui-colla-title">item 1</h3>
<div class="layui-colla-content layui-show">
旧版，通过给列表的内容添加 layui-show 类开启显示
</div>
</div>
<div class="layui-colla-item">
<h3 class="layui-colla-title">item2</h3>
<div class="layui-colla-content">
content 2
</div>
</div>
<div class="layui-colla-item">
<h3 class="layui-colla-title">item 3</h3>
<div class="layui-colla-content">
content 3
</div>
</div>
</div>
<br>
<div class="layui-collapse" lay-filter="test">
<div class="layui-colla-item layui-show">
<h3 class="layui-colla-title">item 111</h3>
<div class="layui-colla-content">
新版 <sup>2.11.4+</sup>，通过给列表项直接添加 layui-show 类开启显示
</div>
</div>
<div class="layui-colla-item">
<h3 class="layui-colla-title">item 222</h3>
<div class="layui-colla-content">
content 2
</div>
</div>
<div class="layui-colla-item">
<h3 class="layui-colla-title">item 333</h3>
<div class="layui-colla-content">
content 3
</div>
</div>
</div>
<br><h2>开启手风琴：</h2><br>
<div class="layui-collapse" lay-accordion>
<div class="layui-colla-item layui-show">
<h3 class="layui-colla-title">item 1</h3>
<div class="layui-colla-content">
旧版，通过给列表的内容添加 layui-show 类开启显示
</div>
</div>
<div class="layui-colla-item">
<h3 class="layui-colla-title">item2</h3>
<div class="layui-colla-content">
content 2
</div>
</div>
<div class="layui-colla-item">
<h3 class="layui-colla-title">item 3</h3>
<div class="layui-colla-content">
content 3
</div>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('element', function(){
var element = layui.element;
element.on('collapse(test)', function(data){
console.log(data);
});
});
</script>
</body>
</html>

37
examples/element.html
View File

@ -68,30 +68,7 @@ body{padding:20px;}
<span class="layui-badge-rim">Hot</span> <span class="layui-badge-rim">Hot</span>
<hr> <hr><br>
<div class="layui-collapse" lay-filter="test" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">
<p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content">
<p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content">
<p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
</div>
</div>
</div>
<br><br>
<div class="layui-progress" lay-showPercent="true" lay-filter="demo-progress-1"> <div class="layui-progress" lay-showPercent="true" lay-filter="demo-progress-1">
<div class="layui-progress-bar" lay-percent="1/3"></div> <div class="layui-progress-bar" lay-percent="1/3"></div>
@ -174,19 +151,11 @@ body{padding:20px;}
灰色分割线 灰色分割线
<hr class="layui-border-gray"> <hr class="layui-border-gray">
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
<script> <script>
layui.use('element', function() {
layui.use(['element', 'form'], function(){ var element = layui.element;
var element = layui.element;
element.on('collapse(test)', function(data){
console.log(data);
}); });
});
</script> </script>
</body> </body>
</html> </html>

3
src/css/layui.css
View File

@ -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-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-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-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);} .layui-card{margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}

45
src/modules/element.js
View File

@ -14,9 +14,6 @@ layui.define('jquery', function(exports) {
var THIS = 'layui-this'; var THIS = 'layui-this';
var SHOW = 'layui-show'; var SHOW = 'layui-show';
var TITLE = '.layui-tab-title'; var TITLE = '.layui-tab-title';
var CONST = {
CLASS_COLLAPSE_EXTEND: 'layui-collapse-item-expand'
};
var Element = function(){ var Element = function(){
this.config = {}; this.config = {};
@ -419,20 +416,35 @@ layui.define('jquery', function(exports) {
var thisItemElem = othis.parent(CLASS_ITEM); var thisItemElem = othis.parent(CLASS_ITEM);
var thisContentElem = othis.siblings(CLASS_CONTENT); var thisContentElem = othis.siblings(CLASS_CONTENT);
var isNone = thisContentElem.css('display') === 'none'; var isNone = thisContentElem.css('display') === 'none';
var isAccordion = typeof wrapper.attr('lay-accordion') === 'string';
// 是否手风琴 // 动画执行完成后的操作
if (typeof wrapper.attr('lay-accordion') === 'string') { var complete = function() {
var itemElems = wrapper.children(CLASS_ITEM); $(this).css('display', ''); // 剔除动画生成的 style display，以适配外部样式的状态重置
itemElems.removeClass(CONST.CLASS_COLLAPSE_EXTEND); };
itemElems.children(CLASS_CONTENT).slideUp(ANIM_MS, function() {
$(this).removeClass(SHOW); // 是否正处于动画中的状态
}); if (thisContentElem.is(':animated')) return;
}
// 展开或收缩 // 展开或收缩
thisItemElem[isNone ? 'addClass' : 'removeClass'](CONST.CLASS_COLLAPSE_EXTEND); if (isNone) {
thisContentElem[isNone ? 'slideDown' : 'slideUp'](ANIM_MS); // 先执行 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 +')', { layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
title: othis, title: othis,
content: thisContentElem, content: thisContentElem,
@ -644,7 +656,12 @@ layui.define('jquery', function(exports) {
// 初始状态 // 初始状态
elemTitle.find('.layui-colla-icon').remove(); elemTitle.find('.layui-colla-icon').remove();
elemTitle.append('<i class="layui-icon layui-icon-right layui-colla-icon"></i>'); elemTitle.append('<i class="layui-icon layui-icon-right layui-colla-icon"></i>');
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); elemTitle.off('click', call.collapse).on('click', call.collapse);