1.问题
image.png
2.实现
鼠标移入导航，下方显示对应的菜单；
鼠标移出导航，隐藏下方对应的菜单；
当下方菜单显示后，鼠标移入没有变化；
当鼠标移出下方的菜单，菜单进行隐藏；
image.png
代码实现:
停止当前事件, 开启下一个 stop()
// 产品方案-- 导航选中下拉, 导航ul的li颜色高亮展示
$(function(){
$('#production_plan .plan li').mouseenter(function () {
$("#production_plan").addClass("active");
})
});
// 产品优势-- 导航选中下拉, 导航ul的li颜色高亮展示
$(function(){
$('#production_advantage .advantage li').mouseenter(function () {
$("#production_advantage").addClass("active");
})
});
// 产品方案-产品优势-- 显示/隐藏下拉导航
$(function(){
$('#production_advantage').mouseenter(function () {
$('.advantage').eq(0).stop(false, true).show("slow")
})
$('#production_advantage').mouseleave(function () {
$('.advantage').eq(0).stop(false, true).hide("slow")
})
$('#production_plan').mouseenter(function () {
$('.plan').eq(0).stop(false, true).show("slow")
})
$('#production_plan').mouseleave(function () {
$('.plan').eq(0).stop(false, true).hide("slow")
})
});
