abstract:首先使用css将一二三级菜单分别放在要显示的位置,然后使用JQuery head()方法将其都隐藏起来之后在使用slideDown()与mouseover()方法设置其怎样显示之后再使用slideUp()方法与mouseleave()方法设置其怎样消失具体代码如下<script type="text/javascript"> $(document).ready(f
首先使用css将一二三级菜单分别放在要显示的位置,然后使用JQuery head()方法将其都隐藏起来之后在使用slideDown()与mouseover()方法设置其怎样显示
之后再使用slideUp()方法与mouseleave()方法设置其怎样消失
具体代码如下
<script type="text/javascript">
$(document).ready(function(){
//隐藏二级与三级下拉菜单
$('.twobox').hide()
$('.three').hide()
//当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(500)
})
//当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(500)
})
//当鼠标移动到包含三级菜单的二级菜单时显示当前三级菜单
$('.two').mouseover(function(){
$(this).find('.three').slideDown(500)
})
//当鼠标移出包含三级菜单的二级菜单时隐藏当前三级菜单
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
Correcting teacher:天蓬老师Correction time:2018-11-27 17:25:36
Teacher's summary:提二点建议:
1. 将代码放在代码块中,再提交;
2. 附一个执行效果图