JQuery三级下拉菜单的制作

Original 2018-11-27 17:21:35 174
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. 附一个执行效果图

Release Notes

Popular Entries