From 5b7ddef2e208e622d2917b5811bd152742484638 Mon Sep 17 00:00:00 2001
From: wefly2 <145842500+wefly2@users.noreply.github.com>
Date: Sat, 7 Oct 2023 09:02:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20nav=20=E5=9E=82=E7=9B=B4?=
=?UTF-8?q?=E5=AF=BC=E8=88=AA=E8=8F=9C=E5=8D=95=E5=B1=95=E5=BC=80=E5=92=8C?=
=?UTF-8?q?=E6=94=B6=E7=BC=A9=E6=97=B6=E7=9A=84=E8=BF=87=E6=B8=A1=E5=8A=A8?=
=?UTF-8?q?=E7=94=BB=20(#1384)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Create FUNDING.yml
* 增加垂直导航菜单折叠动画
支持手风琴效果
* 优化 nav 手风琴相关代码
* 更新 nav 用例
* 新增 nav 菜单展开和收缩时的过渡动画
---------
Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
---
.github/FUNDING.yml | 1 +
examples/element.nav.html | 6 ++--
src/css/layui.css | 14 +++++----
src/modules/element.js | 62 ++++++++++++++++++++-------------------
4 files changed, 43 insertions(+), 40 deletions(-)
create mode 100644 .github/FUNDING.yml
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..dd2241b0
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+open_collective: layui
diff --git a/examples/element.nav.html b/examples/element.nav.html
index 6e2d73cc..87b27563 100644
--- a/examples/element.nav.html
+++ b/examples/element.nav.html
@@ -6,12 +6,10 @@
导航 - 常用元素 - layui
-
-
+
- 最新活动
@@ -130,7 +128,7 @@
-
+
-
产品
diff --git a/src/css/layui.css b/src/css/layui.css
index 92c3dcf9..2989c8ad 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -1274,6 +1274,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-nav .layui-nav-more{position: absolute; top: 0; right: 3px; left: auto !important; margin-top: 0; font-size: 12px; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;}
.layui-nav .layui-nav-mored,
+.layui-nav-expand > a .layui-nav-more,
.layui-nav-itemed > a .layui-nav-more{transform: rotate(180deg);}
@@ -1306,16 +1307,17 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-nav-itemed>a{color: #fff !important;}
.layui-nav-tree .layui-nav-bar{background-color: #16baaa;}
-.layui-nav-tree .layui-nav-child{position: relative; z-index: 0; top: 0; border: none; box-shadow: none;}
+.layui-nav-tree .layui-nav-child{position: relative; z-index: 0; top: 0; border: none; background-color: rgba(0,0,0,.3); box-shadow: none;}
.layui-nav-tree .layui-nav-child dd{margin: 0;}
.layui-nav-tree .layui-nav-child a{color: #fff; color: rgba(255,255,255,.7);}
-.layui-nav-tree .layui-nav-child a:hover,
-.layui-nav-tree .layui-nav-child{background: none; color: #fff;}
+.layui-nav-tree .layui-nav-child a:hover{background: none; color: #fff;}
-.layui-nav-itemed>.layui-nav-child{display: block; background-color: rgba(0,0,0,.3) !important;}
+/* 垂直导航 - 展开状态 */
+.layui-nav-itemed>.layui-nav-child,
.layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child{display: block;}
-/* 侧边 */.layui-nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;}
+/* 垂直导航 - 侧边 */
+.layui-nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;}
/* 导航浅色背景 */
.layui-nav.layui-bg-gray .layui-nav-item a,
@@ -1323,7 +1325,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-nav-tree.layui-bg-gray{padding: 6px 0;}
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>a{color: #000 !important;}
.layui-nav.layui-bg-gray .layui-this a{color: #16b777;}
-.layui-nav-tree.layui-bg-gray .layui-nav-itemed>.layui-nav-child{padding-left: 11px; background: none!important;}
+.layui-nav-tree.layui-bg-gray .layui-nav-child{padding-left: 11px; background: none;}
.layui-nav-tree.layui-bg-gray .layui-nav-item>a{padding-top: 0; padding-bottom: 0;}
.layui-nav-tree.layui-bg-gray .layui-nav-item>a .layui-nav-more{padding: 0;}
.layui-nav-tree.layui-bg-gray .layui-this,
diff --git a/src/modules/element.js b/src/modules/element.js
index e3c210bc..27efb098 100644
--- a/src/modules/element.js
+++ b/src/modules/element.js
@@ -272,14 +272,14 @@ layui.define('jquery', function(exports){
)
*/
- //点击菜单 - a标签触发
+ // 点击菜单 - a 标签触发
,clickThis: function(){
- var othis = $(this)
- ,parents = othis.parents(NAV_ELEM)
- ,filter = parents.attr('lay-filter')
- ,parent = othis.parent()
- ,child = othis.siblings('.'+NAV_CHILD)
- ,unselect = typeof parent.attr('lay-unselect') === 'string'; //是否禁用选中
+ var othis = $(this);
+ var parents = othis.parents(NAV_ELEM);
+ var filter = parents.attr('lay-filter');
+ var parent = othis.parent() ;
+ var child = othis.siblings('.'+NAV_CHILD);
+ var unselect = typeof parent.attr('lay-unselect') === 'string'; // 是否禁用选中
if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){
if(!child[0]){
@@ -288,15 +288,27 @@ layui.define('jquery', function(exports){
}
}
- //如果是垂直菜单
+ // 若为垂直菜单
if(parents.hasClass(NAV_TREE)){
+ var NAV_ITEMED = NAV_ITEM + 'ed';
+ var NAV_EXPAND = 'layui-nav-expand';
+ var isNone = child.css('display') === 'none';
+
child.removeClass(NAV_ANIM);
- //如果有子菜单，则展开
+ // 若有子菜单，则展开
if(child[0]){
- parent[child.css('display') === 'none' ? 'addClass': 'removeClass'](NAV_ITEM+'ed');
- if(parents.attr('lay-shrink') === 'all'){
- parent.siblings().removeClass(NAV_ITEM + 'ed');
+ child.slideToggle(200, function() {
+ isNone || parent.removeClass(NAV_ITEMED);
+ });
+ parent[isNone ? 'addClass': 'removeClass'](NAV_EXPAND);
+ // 手风琴
+ if(typeof parents.attr('lay-accordion') === 'string' || parents.attr('lay-shrink') === 'all'){
+ // 收缩兄弟项
+ parent.siblings().removeClass([
+ NAV_ITEMED,
+ NAV_EXPAND
+ ].join(' ')).children('.'+NAV_CHILD).slideUp(200);
}
}
}
@@ -304,26 +316,16 @@ layui.define('jquery', function(exports){
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
}
- //点击子菜单选中
- /*
- ,clickChild: function(){
- var othis = $(this), parents = othis.parents(NAV_ELEM)
- ,filter = parents.attr('lay-filter');
- parents.find('.'+THIS).removeClass(THIS);
- othis.addClass(THIS);
- layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
- }
- */
-
- //折叠面板
+ // 折叠面板
,collapse: function(){
- var othis = $(this), icon = othis.find('.layui-colla-icon')
- ,elemCont = othis.siblings('.layui-colla-content')
- ,parents = othis.parents('.layui-collapse').eq(0)
- ,filter = parents.attr('lay-filter')
- ,isNone = elemCont.css('display') === 'none';
+ 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';
- //是否手风琴
+ // 是否手风琴
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('');