From dab67b0a6c0000aeea16702fcf6605926b09b59e Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Wed, 18 Oct 2023 01:54:58 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20dropdown=20=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E7=BB=84=E6=8A=98=E5=8F=A0=E5=8A=A8=E7=94=BB=E6=95=88?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/layui.css | 6 ++++-- src/modules/dropdown.js | 48 +++++++++++++++++++++++++++++------------ 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/css/layui.css b/src/css/layui.css index 2989c8ad..9d37e181 100644 --- a/src/css/layui.css +++ b/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;} diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index 2bab9663..7cf3ad9e 100644 --- a/src/modules/dropdown.js +++ b/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) - ,elemGroup = othis.parent() - ,data = elemGroup.data('item') || {} + var othis = $(this); + var elemGroup = othis.parent(); + 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')); - if(needSpread){ - othis.removeClass(STR_ITEM_UP).addClass(STR_ITEM_DOWN); - elemIcon.removeClass('layui-icon-down').addClass('layui-icon-up'); - } else { - othis.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP); - elemIcon.removeClass('layui-icon-up').addClass('layui-icon-down'); + var accordion = options + ? options.accordion + : typeof othis.parents('.layui-menu').eq(0).attr('lay-accordion') === 'string'; + + var toggle = function (groupElem, isOpen) { + var contentElem = groupElem.children('ul'); + 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); + } + }) }; // 全局事件 From 73c1129f2ca1c594308aa10e43de203e886ebbad Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Wed, 18 Oct 2023 02:23:52 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20dropdown=20=E5=92=8C?= =?UTF-8?q?=20menu=20=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/dropdown/detail/options.md | 14 ++++++++++++++ docs/menu/index.md | 1 + 2 files changed, 15 insertions(+) diff --git a/docs/dropdown/detail/options.md b/docs/dropdown/detail/options.md index 1f058f56..6aa5b415 100644 --- a/docs/dropdown/detail/options.md +++ b/docs/dropdown/detail/options.md @@ -120,6 +120,20 @@ `true` + + + +accordion 2.8.18+ + + +是否开启手风琴效果 + + +boolean + + +`false` + diff --git a/docs/menu/index.md b/docs/menu/index.md index feac0d6b..52148198 100644 --- a/docs/menu/index.md +++ b/docs/menu/index.md @@ -21,6 +21,7 @@ toc: true - 通过 `` 命名基础菜单容器 - 追加 `className` 为 `layui-menu-lg` 可设置基础菜单的大尺寸风格 + - 追加 `lay-accordion` 属性可设置手风琴效果 2.8.18+ - 通过 `
  • ` 放置菜单列表项 - 属性： - 追加 `className` 为　`layui-menu-item-group` 可设置当前菜单为菜单组，即子菜单为纵向层级。 From 104a4cfd110f60dce81018cce3edeff427b0f6d7 Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Wed, 18 Oct 2023 19:42:38 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BF=AB=E9=80=9F?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=97=B6=E7=9A=84=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/dropdown.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index 7cf3ad9e..b1d132a3 100644 --- a/src/modules/dropdown.js +++ b/src/modules/dropdown.js @@ -453,6 +453,8 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ var contentElem = groupElem.children('ul'); var contentHeight = contentElem[0].scrollHeight; + if(contentElem.is(':animated')) return; + groupElem.removeClass(isOpen ? STR_ITEM_UP : STR_ITEM_DOWN).addClass(isOpen ? STR_ITEM_DOWN : STR_ITEM_UP); contentElem.height(isOpen ? 0 : contentHeight) .stop() @@ -468,7 +470,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ if (!needSpread || !accordion) return; othis.siblings('.' + STR_ITEM_GROUP).each(function (index, item) { - var itemElem = $(item) + var itemElem = $(item); if(!itemElem.hasClass(STR_ITEM_UP)){ toggle(itemElem, false); } From ae1b08ad85fda24fbc74582d456ffb275b11f600 Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Thu, 19 Oct 2023 09:00:02 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/dropdown.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index b1d132a3..aacc76f6 100644 --- a/src/modules/dropdown.js +++ b/src/modules/dropdown.js @@ -349,7 +349,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ var data = elemGroup.data('item') || {}; if(data.type === 'group' && options.isAllowSpread){ - thisModule.spread(elemGroup, options); + thisModule.spread(elemGroup, options.accordion); } }); @@ -443,11 +443,8 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ }; // 设置菜单组展开和收缩状态 - thisModule.spread = function(othis, options){ + thisModule.spread = function(othis, isAccordion){ var needSpread = othis.hasClass(STR_ITEM_UP); - var accordion = options - ? options.accordion - : typeof othis.parents('.layui-menu').eq(0).attr('lay-accordion') === 'string'; var toggle = function (groupElem, isOpen) { var contentElem = groupElem.children('ul'); @@ -468,12 +465,9 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ 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); - } + if (!needSpread || !isAccordion) return; + layui.each(othis.siblings('.' + STR_ITEM_DOWN), function(index, item){ + toggle($(item), false); }) }; @@ -557,9 +551,10 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ var othis = $(this); var elemGroup = othis.parents('.'+ STR_ITEM_GROUP +':eq(0)'); var options = lay.options(elemGroup[0]); + var isAccordion = typeof othis.parents('.layui-menu').eq(0).attr('lay-accordion') === 'string'; if(('isAllowSpread' in options) ? options.isAllowSpread : true){ - thisModule.spread(elemGroup); + thisModule.spread(elemGroup, isAccordion); } });