abstract:jQuery三级下拉菜单
内容内容$(document).ready(function(){
$('.menu').slideDown(500);
// 隐藏二级与三级菜单
$('.item1').hide();
$('.item2').hide();
$('.item3').hide();
$('.item4').hide();
// 当鼠标 移入 包含二级菜单的一级菜单时 显示 当前二级菜单
$('.first>li').mouseover(function(){
$(this).find('.item1').slideDown(100);
});
// 当鼠标 移出 包含二级菜单的一级菜单时 隐藏 当前二级菜单
$('.first>li').mouseleave(function(){
$(this).find('.item1').slideUp(100);
});
// 当鼠标 移入 包含三级菜单的二级菜单时 显示 当前三级菜单
$('.two').mouseover(function(){
console.log(this)
$(this).find('.item2').slideDown(100);
});
// 当鼠标 移出 包含三级菜单的二级菜单时 隐藏 当前三级菜单
$('.two').mouseleave(function(){
$(this).find('.item2').slideUp(100);
});
// 当鼠标 移入 包含四级菜单的三级菜单时 显示 当前四级菜单
$('.four').mouseover(function(){
$(this).find('.item3').slideDown(100);
});
// 当鼠标 移出 包含四级菜单的三级菜单时 隐藏 当前四级菜单
$('.four').mouseleave(function(){
$(this).find('.item3').slideUp(100);
});
$('.first>li').hover(function(){
$(this).find('.item4').fadeIn(800);
},function(){
$(this).find('.item4').fadeOut(500);
});
$('.first>.cont').mouseover(function(){
$('.left').animate({marginLeft: '0px'});
$('.right').animate({marginRight: '0px'});
});
$('.first>.cont').mouseleave(function(){
$('.left').animate({marginLeft: '-220px'});
$('.right').animate({marginRight: '-220px'});
});
});
Correcting teacher:韦小宝Correction time:2019-02-13 09:56:56
Teacher's summary:不错不错 写的很漂亮 这是要仿哔哩哔哩啊 继续加油吧!