mirror of https://github.com/layui/layui
重构 nav 垂直导航菜单展开收缩动画 (#1407)
* 更新 nav 用例 * 优化 nav 垂直导航的浅色背景样式 * 剔除 nav 多余选择器 * 优化 nav 代码书写规范 * 重构 nav 垂直导航菜单展开收缩动画pull/1408/head
贤心
GitHub
commit
32ea564e42
|
|
@ -127,103 +127,94 @@
|
||||||
|
|
||||||
<div class="demo-nav-tree">
|
<div class="demo-nav-tree">
|
||||||
<div class="layui-inline">
|
<div class="layui-inline">
|
||||||
|
|
||||||
<ul class="layui-nav layui-nav-tree" lay-accordion lay-filter="test">
|
<ul class="layui-nav layui-nav-tree" lay-accordion lay-filter="test">
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a class="" href="javascript:;">产品</a>
|
<a class="" href="javascript:;">菜单 1</a>
|
||||||
<dl class="layui-nav-child">
|
<dl class="layui-nav-child">
|
||||||
<dd><a href="javascript:;">移动模块</a></dd>
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
<dd>
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
<a href="javascript:;">后台模版</a>
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
<dl class="layui-nav-child">
|
|
||||||
<dd><a href="javascript:;">组件一</a></dd>
|
|
||||||
<dd>
|
|
||||||
<a href="javascript:;">组件二</a>
|
|
||||||
</dd>
|
|
||||||
<dd><a href="javascript:;">组件三</a></dd>
|
|
||||||
</dl>
|
|
||||||
</dd>
|
|
||||||
<dd><a href="javascript:;">电商平台</a></dd>
|
|
||||||
<dd><a href="">跳转菜单</a></dd>
|
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="javascript:;">解决方案</a>
|
<a href="javascript:;">菜单 2</a>
|
||||||
<dl class="layui-nav-child">
|
<dl class="layui-nav-child">
|
||||||
<dd><a href="javascript:;">移动模块</a></dd>
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
<dd>
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
<a href="javascript:;">后台模版</a>
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
</dd>
|
|
||||||
<dd><a href="">电商平台</a></dd>
|
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
|
<li class="layui-nav-item">
|
||||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
<a href="javascript:;">菜单 3</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">菜单 4</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">菜单 5</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-inline">
|
<div class="layui-inline">
|
||||||
|
<ul class="layui-nav layui-nav-tree layui-bg-gray" lay-filter="test">
|
||||||
<ul class="layui-nav layui-nav-tree layui-bg-gray" lay-filter="test">
|
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a class="" href="javascript:;">产品</a>
|
<a class="" href="javascript:;">菜单 1</a>
|
||||||
<dl class="layui-nav-child">
|
<dl class="layui-nav-child">
|
||||||
<dd><a href="javascript:;">移动模块</a></dd>
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
<dd>
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
<a href="javascript:;">后台模版</a>
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
<dl class="layui-nav-child">
|
|
||||||
<dd><a href="javascript:;">组件一</a></dd>
|
|
||||||
<dd>
|
|
||||||
<a href="javascript:;">组件二</a>
|
|
||||||
</dd>
|
|
||||||
<dd><a href="javascript:;">组件三</a></dd>
|
|
||||||
</dl>
|
|
||||||
</dd>
|
|
||||||
<dd><a href="javascript:;">电商平台</a></dd>
|
|
||||||
<dd><a href="">跳转菜单</a></dd>
|
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="javascript:;">解决方案</a>
|
<a href="javascript:;">菜单 2</a>
|
||||||
<dl class="layui-nav-child">
|
<dl class="layui-nav-child">
|
||||||
<dd><a href="javascript:;">移动模块</a></dd>
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
<dd>
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
<a href="javascript:;">后台模版</a>
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
</dd>
|
|
||||||
<dd><a href="">电商平台</a></dd>
|
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
|
<li class="layui-nav-item">
|
||||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
<a href="javascript:;">菜单 3</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">菜单 4</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">菜单 5</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-inline">
|
<div class="layui-inline">
|
||||||
|
<ul class="layui-nav layui-nav-tree layui-bg-black" lay-accordion lay-filter="test">
|
||||||
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
|
|
||||||
<li class="layui-nav-item layui-nav-itemed">
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
<a class="" href="javascript:;">产品</a>
|
<a class="" href="javascript:;">菜单 1</a>
|
||||||
<dl class="layui-nav-child">
|
<dl class="layui-nav-child">
|
||||||
<dd><a href="javascript:;">移动模块</a></dd>
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
<dd>
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
<a href="javascript:;">后台模版</a>
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
</dd>
|
|
||||||
<dd><a href="javascript:;">电商平台</a></dd>
|
|
||||||
<dd><a href="">跳转菜单</a></dd>
|
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="javascript:;">解决方案</a>
|
<a href="javascript:;">菜单 2</a>
|
||||||
<dl class="layui-nav-child">
|
<dl class="layui-nav-child">
|
||||||
<dd><a href="javascript:;">移动模块</a></dd>
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
<dd><a href="javascript:;">后台模版</a></dd>
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
<dd><a href="">电商平台</a></dd>
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item"><a href="">云市场</a></li>
|
<li class="layui-nav-item">
|
||||||
<li class="layui-nav-item"><a href="">社区</a></li>
|
<a href="javascript:;">菜单 3</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">菜单 4</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">菜单 5</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1285,7 +1285,6 @@ 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-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 .layui-nav-mored,
|
||||||
.layui-nav-expand > a .layui-nav-more,
|
|
||||||
.layui-nav-itemed > a .layui-nav-more{transform: rotate(180deg);}
|
.layui-nav-itemed > a .layui-nav-more{transform: rotate(180deg);}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1333,12 +1332,9 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||||
/* 导航浅色背景 */
|
/* 导航浅色背景 */
|
||||||
.layui-nav.layui-bg-gray .layui-nav-item a,
|
.layui-nav.layui-bg-gray .layui-nav-item a,
|
||||||
.layui-nav-tree.layui-bg-gray a{color: #373737; color: rgba(0,0,0,.8);}
|
.layui-nav-tree.layui-bg-gray a{color: #373737; color: rgba(0,0,0,.8);}
|
||||||
.layui-nav-tree.layui-bg-gray{padding: 6px 0;}
|
|
||||||
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>a{color: #000 !important;}
|
.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.layui-bg-gray .layui-this a{color: #16b777;}
|
||||||
.layui-nav-tree.layui-bg-gray .layui-nav-child{padding-left: 11px; background: none;}
|
.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,
|
.layui-nav-tree.layui-bg-gray .layui-this,
|
||||||
.layui-nav-tree.layui-bg-gray .layui-this>a,
|
.layui-nav-tree.layui-bg-gray .layui-this>a,
|
||||||
.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,
|
.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,
|
||||||
|
|
|
||||||
|
|
@ -273,45 +273,62 @@ layui.define('jquery', function(exports){
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// 点击菜单 - a 标签触发
|
// 点击菜单 - a 标签触发
|
||||||
,clickThis: function(){
|
,clickThis: function() {
|
||||||
var othis = $(this);
|
var othis = $(this);
|
||||||
var parents = othis.parents(NAV_ELEM);
|
var parents = othis.closest(NAV_ELEM);
|
||||||
var filter = parents.attr('lay-filter');
|
var filter = parents.attr('lay-filter');
|
||||||
var parent = othis.parent() ;
|
var parent = othis.parent() ;
|
||||||
var child = othis.siblings('.'+NAV_CHILD);
|
var child = othis.siblings('.'+ NAV_CHILD);
|
||||||
var unselect = typeof parent.attr('lay-unselect') === 'string'; // 是否禁用选中
|
var unselect = typeof parent.attr('lay-unselect') === 'string'; // 是否禁用选中
|
||||||
|
|
||||||
if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){
|
// 满足点击选中的条件
|
||||||
if(!child[0]){
|
if (!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect) {
|
||||||
parents.find('.'+THIS).removeClass(THIS);
|
if (!child[0]) {
|
||||||
|
parents.find('.'+ THIS).removeClass(THIS);
|
||||||
parent.addClass(THIS);
|
parent.addClass(THIS);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 若为垂直菜单
|
// 若为垂直菜单
|
||||||
if (parents.hasClass(NAV_TREE)) {
|
if (parents.hasClass(NAV_TREE)) {
|
||||||
var NAV_ITEMED = NAV_ITEM + 'ed';
|
var NAV_ITEMED = NAV_ITEM + 'ed'; // 用于标注展开状态
|
||||||
var NAV_EXPAND = 'layui-nav-expand';
|
var needExpand = !parent.hasClass(NAV_ITEMED); // 是否执行展开
|
||||||
var needExpand = !(parent.hasClass(NAV_EXPAND) || parent.hasClass(NAV_ITEMED));
|
var ANIM_MS = 200; // 动画过渡毫秒数
|
||||||
|
|
||||||
|
// 动画执行完成后的操作
|
||||||
|
var complete = function() {
|
||||||
|
$(this).css({
|
||||||
|
"display": "" // 剔除动画生成的 style display，以适配外部样式的状态重置
|
||||||
|
});
|
||||||
|
// 避免导航滑块错位
|
||||||
|
parents.children('.'+ NAV_BAR).css({
|
||||||
|
opacity: 0
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
// 是否正处于动画中的状态
|
// 是否正处于动画中的状态
|
||||||
if (child.is(':animated')) return;
|
if (child.is(':animated')) return;
|
||||||
|
|
||||||
|
// 剔除可能存在的 CSS3 动画类
|
||||||
child.removeClass(NAV_ANIM);
|
child.removeClass(NAV_ANIM);
|
||||||
|
|
||||||
// 若有子菜单，则展开
|
// 若有子菜单，则对其执行展开或收缩
|
||||||
if (child[0]) {
|
if (child[0]) {
|
||||||
child.stop().slideToggle(200, function() {
|
if (needExpand) {
|
||||||
needExpand || parent.removeClass(NAV_ITEMED);
|
// 先执行 slideDown 动画，再标注展开状态样式，避免元素 `block` 状态导致动画无效
|
||||||
});
|
child.slideDown(ANIM_MS, complete);
|
||||||
parent[needExpand ? 'addClass': 'removeClass'](NAV_EXPAND);
|
parent.addClass(NAV_ITEMED);
|
||||||
// 手风琴
|
} else {
|
||||||
if(typeof parents.attr('lay-accordion') === 'string' || parents.attr('lay-shrink') === 'all'){
|
// 先取消展开状态样式，再将元素临时显示，避免 `none` 状态导致 slideUp 动画无效
|
||||||
// 收缩兄弟项
|
parent.removeClass(NAV_ITEMED);
|
||||||
parent.siblings().removeClass([
|
child.show().slideUp(ANIM_MS, complete);
|
||||||
NAV_ITEMED,
|
}
|
||||||
NAV_EXPAND
|
|
||||||
].join(' ')).children('.'+NAV_CHILD).stop().slideUp(200);
|
// 手风琴 --- 收缩兄弟展开项
|
||||||
|
if (typeof parents.attr('lay-accordion') === 'string' || parents.attr('lay-shrink') === 'all') {
|
||||||
|
var parentSibs = parent.siblings('.'+ NAV_ITEMED);
|
||||||
|
parentSibs.removeClass(NAV_ITEMED);
|
||||||
|
parentSibs.children('.'+ NAV_CHILD).show().stop().slideUp(ANIM_MS, complete);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -357,56 +374,65 @@ layui.define('jquery', function(exports){
|
||||||
call.tabAuto.call({});
|
call.tabAuto.call({});
|
||||||
}
|
}
|
||||||
|
|
||||||
//导航菜单
|
// 导航菜单
|
||||||
,nav: function(){
|
,nav: function(){
|
||||||
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, NAV_TITLE = 'layui-nav-title'
|
var TIME = 200;
|
||||||
|
var timer = {};
|
||||||
|
var timerMore = {};
|
||||||
|
var timeEnd = {};
|
||||||
|
var NAV_TITLE = 'layui-nav-title';
|
||||||
|
|
||||||
//滑块跟随
|
// 滑块跟随
|
||||||
,follow = function(bar, nav, index){
|
var follow = function(bar, nav, index) {
|
||||||
var othis = $(this), child = othis.find('.'+NAV_CHILD);
|
var othis = $(this);
|
||||||
if(nav.hasClass(NAV_TREE)){
|
var child = othis.find('.'+NAV_CHILD);
|
||||||
//无子菜单时跟随
|
|
||||||
if(!child[0]){
|
// 是否垂直导航菜单
|
||||||
|
if (nav.hasClass(NAV_TREE)) {
|
||||||
|
// 无子菜单时跟随
|
||||||
|
if (!child[0]) {
|
||||||
var thisA = othis.children('.'+ NAV_TITLE);
|
var thisA = othis.children('.'+ NAV_TITLE);
|
||||||
bar.css({
|
bar.css({
|
||||||
top: othis.offset().top - nav.offset().top
|
top: othis.offset().top - nav.offset().top,
|
||||||
,height: (thisA[0] ? thisA : othis).outerHeight()
|
height: (thisA[0] ? thisA : othis).outerHeight(),
|
||||||
,opacity: 1
|
opacity: 1
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
child.addClass(NAV_ANIM);
|
child.addClass(NAV_ANIM);
|
||||||
|
|
||||||
//若居中对齐
|
// 若居中对齐
|
||||||
if(child.hasClass(NAV_CHILD_C)) child.css({
|
if (child.hasClass(NAV_CHILD_C)) {
|
||||||
left: -(child.outerWidth() - othis.width())/2
|
child.css({
|
||||||
});
|
left: -(child.outerWidth() - othis.width()) / 2
|
||||||
|
|
||||||
//滑块定位
|
|
||||||
if(child[0]){ //若有子菜单，则滑块消失
|
|
||||||
bar.css({
|
|
||||||
left: bar.position().left + bar.width()/2
|
|
||||||
,width: 0
|
|
||||||
,opacity: 0
|
|
||||||
});
|
|
||||||
} else { //bar 跟随
|
|
||||||
bar.css({
|
|
||||||
left: othis.position().left + parseFloat(othis.css('marginLeft'))
|
|
||||||
,top: othis.position().top + othis.height() - bar.height()
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//渐显滑块并适配宽度
|
// 滑块定位
|
||||||
timer[index] = setTimeout(function(){
|
if (child[0]) { // 若有子菜单，则滑块消失
|
||||||
bar.css({
|
bar.css({
|
||||||
width: child[0] ? 0 : othis.width()
|
left: bar.position().left + bar.width() / 2,
|
||||||
,opacity: child[0] ? 0 : 1
|
width: 0,
|
||||||
|
opacity: 0
|
||||||
|
});
|
||||||
|
} else { // bar 跟随
|
||||||
|
bar.css({
|
||||||
|
left: othis.position().left + parseFloat(othis.css('marginLeft')),
|
||||||
|
top: othis.position().top + othis.height() - bar.height()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渐显滑块并适配宽度
|
||||||
|
timer[index] = setTimeout(function() {
|
||||||
|
bar.css({
|
||||||
|
width: child[0] ? 0 : othis.width(),
|
||||||
|
opacity: child[0] ? 0 : 1
|
||||||
});
|
});
|
||||||
}, device.ie && device.ie < 10 ? 0 : TIME);
|
}, device.ie && device.ie < 10 ? 0 : TIME);
|
||||||
|
|
||||||
//显示子菜单
|
// 显示子菜单
|
||||||
clearTimeout(timeEnd[index]);
|
clearTimeout(timeEnd[index]);
|
||||||
if(child.css('display') === 'block'){
|
if (child.css('display') === 'block') {
|
||||||
clearTimeout(timerMore[index]);
|
clearTimeout(timerMore[index]);
|
||||||
}
|
}
|
||||||
timerMore[index] = setTimeout(function(){
|
timerMore[index] = setTimeout(function(){
|
||||||
|
|
@ -416,61 +442,64 @@ layui.define('jquery', function(exports){
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
//遍历导航
|
// 遍历导航
|
||||||
$(NAV_ELEM + elemFilter).each(function(index){
|
$(NAV_ELEM + elemFilter).each(function(index) {
|
||||||
var othis = $(this)
|
var othis = $(this);
|
||||||
,bar = $('<span class="'+ NAV_BAR +'"></span>')
|
var bar = $('<span class="'+ NAV_BAR +'"></span>');
|
||||||
,itemElem = othis.find('.'+NAV_ITEM);
|
var itemElem = othis.find('.'+NAV_ITEM);
|
||||||
|
|
||||||
//hover 滑动效果
|
// hover 滑动效果
|
||||||
if(!othis.find('.'+NAV_BAR)[0]){
|
if (!othis.find('.'+NAV_BAR)[0]) {
|
||||||
othis.append(bar);
|
othis.append(bar);
|
||||||
(othis.hasClass(NAV_TREE)
|
( othis.hasClass(NAV_TREE)
|
||||||
? itemElem.find('dd,>.'+ NAV_TITLE)
|
? itemElem.find('dd,>.'+ NAV_TITLE)
|
||||||
: itemElem).on('mouseenter', function(){
|
: itemElem
|
||||||
|
).on('mouseenter', function() {
|
||||||
follow.call(this, bar, othis, index);
|
follow.call(this, bar, othis, index);
|
||||||
}).on('mouseleave', function(){ //鼠标移出
|
}).on('mouseleave', function() { // 鼠标移出
|
||||||
//是否为垂直导航
|
// 是否为垂直导航
|
||||||
if(othis.hasClass(NAV_TREE)){
|
if (othis.hasClass(NAV_TREE)) {
|
||||||
bar.css({
|
bar.css({
|
||||||
height: 0
|
height: 0,
|
||||||
,opacity: 0
|
opacity: 0
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
//隐藏子菜单
|
// 隐藏子菜单
|
||||||
clearTimeout(timerMore[index]);
|
clearTimeout(timerMore[index]);
|
||||||
timerMore[index] = setTimeout(function(){
|
timerMore[index] = setTimeout(function(){
|
||||||
othis.find('.'+NAV_CHILD).removeClass(SHOW);
|
othis.find('.'+ NAV_CHILD).removeClass(SHOW);
|
||||||
othis.find('.'+NAV_MORE).removeClass(NAV_MORE+'d');
|
othis.find('.'+ NAV_MORE).removeClass(NAV_MORE +'d');
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
othis.on('mouseleave', function(){
|
|
||||||
|
// 鼠标离开当前菜单时
|
||||||
|
othis.on('mouseleave', function() {
|
||||||
clearTimeout(timer[index])
|
clearTimeout(timer[index])
|
||||||
timeEnd[index] = setTimeout(function(){
|
timeEnd[index] = setTimeout(function() {
|
||||||
if(!othis.hasClass(NAV_TREE)){
|
if (!othis.hasClass(NAV_TREE)) {
|
||||||
bar.css({
|
bar.css({
|
||||||
width: 0
|
width: 0,
|
||||||
,left: bar.position().left + bar.width()/2
|
left: bar.position().left + bar.width() / 2,
|
||||||
,opacity: 0
|
opacity: 0
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, TIME);
|
}, TIME);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//展开子菜单
|
// 展开子菜单
|
||||||
itemElem.find('a').each(function(){
|
itemElem.find('a').each(function() {
|
||||||
var thisA = $(this)
|
var thisA = $(this);
|
||||||
,parent = thisA.parent()
|
var parent = thisA.parent();
|
||||||
,child = thisA.siblings('.'+NAV_CHILD);
|
var child = thisA.siblings('.'+ NAV_CHILD);
|
||||||
|
|
||||||
//输出小箭头
|
// 输出小箭头
|
||||||
if(child[0] && !thisA.children('.'+NAV_MORE)[0]){
|
if (child[0] && !thisA.children('.'+ NAV_MORE)[0]) {
|
||||||
thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>');
|
thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>');
|
||||||
}
|
}
|
||||||
|
|
||||||
thisA.off('click', call.clickThis).on('click', call.clickThis); //点击菜单
|
thisA.off('click', call.clickThis).on('click', call.clickThis); // 点击菜单
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue