新增 nav 垂直导航菜单展开和收缩时的过渡动画 (#1384)

* Create FUNDING.yml * 增加垂直导航菜单折叠动画支持手风琴效果 * 优化 nav 手风琴相关代码 * 更新 nav 用例 * 新增 nav 菜单展开和收缩时的过渡动画 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
1 year ago · 5b7ddef2e2
parent 81d1a06bb2
commit 5b7ddef2e2
4 changed files with 43 additions and 40 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1 @@
+open_collective: layui
--- a/examples/element.nav.html
+++ b/examples/element.nav.html
@ -6,12 +6,10 @@
  <title>导航 - 常用元素 - layui</title>
  <link rel="stylesheet" href="../src/css/layui.css">
  <style>
-    body{padding: 16px;}
    .demo-nav-tree>.layui-inline{vertical-align: top;}
  </style>
 </head>
-<body>
-
+<body class="layui-padding-3">

 <ul class="layui-nav">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
@ -130,7 +128,7 @@
 <div class="demo-nav-tree">
  <div class="layui-inline">

-    <ul class="layui-nav layui-nav-tree" lay-filter="test">
+    <ul class="layui-nav layui-nav-tree" lay-accordion lay-filter="test">
      <li class="layui-nav-item">
        <a class="" href="javascript:;">产品</a>
        <dl class="layui-nav-child">
--- 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,
--- 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('&#xe602;');