华为云菜单级联效果
之前华为云还是有这种效果的,但是目前看官网给取消掉了,网站是用jquery 操作dom 来实现的菜单联动效果,现在想用vue 来实现一遍,所以得先看看人家的代码,然后跟着作分析实现出来。
设计知识点
- 函数闭包 (Closure)
- 自定义事件派发(dispatchEvent)
- 函数放抖动 (debounce)
- css3 transition
大体思路
用float 布局,ul li横向展开 增添鼠标移入移出事件,给元素增减css 样式控制动画。 当鼠标hover事件到menu 图表中 中展开一级菜单,当进入一级菜单的某一li 是 根据data-key显示二级菜单内容,进入二级菜单类似。 当鼠标移出菜单时,依次从大到小隐藏之前显示的层级。
获取代码
有个App 比较好用可以从爬取整站的前端代码,叫SiteSucker
爬取后的代码
// 设置层级导航显示隐藏的状态
var setLevelnavState = function ($el, state) {
var setState = function ($el, state) {
if (state !== 'show' && state !== 'hide') return;
var duration = 300;
var isShow = state === 'show';
var eventFix = isShow ? 'show' : 'hide';
$el.triggerHandler('before' + eventFix);
$el.addClass('sliding');
setTimeout(function () {
$el.toggleClass('show', isShow);
var called = false;
$el.one(transitionEnd, function () {
called = true;
$el.removeClass('sliding');
$el.triggerHandler('after' + eventFix);
});
setTimeout(function () {
if (!called) {
$el.trigger(transitionEnd);
}
}, duration);
}, 0);
};
var setStateStrategy = {};
setStateStrategy.show = function () {
setState($el, 'show');
};
setStateStrategy.hide = function () {
//nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。
var $willHideLevel = $el.add($el.nextAll('.header-allnav-level.show'));
var $lastShowLevel = $willHideLevel.last();
var willHideNumber = $willHideLevel.length;
console.log("-----------------------------------------");
console.log("$el",$el[0].className);
// console.log("$el",$el.nextAll('.header-allnav-level.show'))
console.log("$willHideLevel",$willHideLevel);
// console.log("$lastShowLevel",$lastShowLevel[0].className);
// console.log("$willHideNumber",willHideNumber);
console.log("-----------------------------------------");
// 去除菜单项激活效果
$willHideLevel.find('.header-allnav-common-item,[data-define="allnav-item"]').removeClass('active');
// 从后往前依次隐藏层级菜单
setState($lastShowLevel, 'hide');
$willHideLevel.one('afterhide', function () {
willHideNumber--;
if (willHideNumber <= 0) return;
$lastShowLevel = $lastShowLevel.prev('.header-allnav-level');
console.log("******************************************");
console.log("$lastShowLevel",$lastShowLevel[0].className);
console.log("******************************************");
setState($lastShowLevel, 'hide');
});
};
setStateStrategy[state]();
};
复制代码