JS实现京东无延迟菜单效果 $(document).ready(function(){
var sub = $('#sub')
var activeRow
var activeMenu
var timer
var mouseInSub = false
sub.on('mouseenter', function(e) {
mouseInSub = ture
}).on('mouseleave', function(e) {
mouseInSub = false
})
$('#test')
.on('mouseenter', function(e) {
sub.removeClass('none')
})
.on('mouseleave', function(e) {
sub.addClass('none')
if (activeRow) {
activeRow.removeClass('active')
activeRow = null
}
if (activeMenu) {
activeMenu.addClass('none')
activeMenu = null
}
})
.on('mouseenter', 'li', function(e) {
if (!activeRow) {
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function() {
if (mouseInSub) {
return
}
activeRow.removeClass('active')
activeMenu.addClass('none')
activeRow = $(e.target)
activeRow.addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
timer = null
},200)
})
})
添加回答
举报
0/150
提交
取消