github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(collapse): 新增折叠面板展开和收缩时的过渡动画

pull/2722/head
贤心 2025-06-16 09:31:31 +08:00
parent ac8d5ccc30
commit 9023ae9e6f
2 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/layui.css
View File

@ -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);}

65
src/modules/element.js
View File

@ -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('');
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 ? '' : '');
// 展开或收缩
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);
});
});
}
};