$(document).ready(function() {
var sub = $("#sub")
//变量sub =子菜单
var activeRow
//变量activeRoe为激活的一级菜单中的行
var activeMenu
//变量activeMenu与之对应的二级菜单
$("#test")
//一级菜单
.on('mouseenter',function(e){
sub.removeClass('none')
})
// 鼠标移至时去除sub的none类属性-可见
.on('mouseleave',function(e){
sub.addClass('none')
// 鼠标移出时添加sub的none类属性-不可见
if (activeRow) {
//如果存在一级菜单激活
activeRow.removeClass('active')
//去除样式一级菜单的active样式
activeRow = null
}
if (activeMenu) {
//如果存在二级菜单激活
activeMenu.addClass('none')
//给二级菜单添加none样式
activeMenu = null
}
})
.on('mouseenter','li',function(e) {
//鼠标移动到li上
if(!activeRow) {
//如果没有激活的列表项
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
})
})