jQuery实现具有动画效果的多级下拉菜单代码

本文通过一个实例展示了jQuery如何实现具有动画效果的多级下拉菜单代码。分享给大家参考。具体如下：

这是一个基于jQuery的多级下拉菜单，有动画效果。所有元素都嵌套在ul li ul li的循环格式中。如果没有下级分类，嵌套以li a结束，代码中不使用toggle()的原因是收缩菜单时隐藏该菜单下级菜单后的所有元素。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-animate-style-down-show-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery多级下拉菜单/title脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : jquery 1。3 .2 .js '/脚本样式类型=' text/CSS ' ul，Li { list-style : none；font-size :12 px线高：20 px宽度：80 px余量：0左填充：6 px}.子{ display:none}。导航a { display : block color : # 5c 84 C1；填充-左侧：22 px}/stylescript语言=' JavaScript '类型=' text/JavaScript '//说明所有的元素以ul li ul li ul li的循环格式嵌套如果没有下级分类就用阿利结束嵌套$(文档)。ready(function(){ //$(').nav ul li ').儿童(' ul ').hide()；$('.nav ').查找('里').not(':has(ul)').儿童(' a ').CSS({文本声明： ' none '，颜色：'#333 '，背景：'none'}).单击(function(){ $(this)).get(0).location.href=''' $(this).attr(' href ')' ' '；});$('.nav ').find('li:has(ul)').儿童(' a ').CSS({ background : ' URL(images/statu _ close。gif)无重复左上角；'}) .单击(function(){ if($(this)).下一个(' ul ').是(' :隐藏'){ $(this).下一个(' ul ').向下滑动("慢");if($(this).父代('里').兄弟姐妹('里').儿童(' ul ').是(' :可见'){ $(this).父代('里').兄弟姐妹('里').查找(' ul ').向上滑动(' 1000 ');$(这个)。父代('里').兄弟姐妹(' li:has(ul)').儿童(' a ').CSS({ background : ' URL(images/statu _ close。gif)无重复左上角；'}) .end().find('li:has(ul)').儿童(' a ').CSS({ background : ' URL(images/statu _ close。gif)无重复左上角；'});} $(这个)。CSS({ background : ' URL(images/status _ open。gif)无重复左上角；'});返回false}else{ $(this).下一个(' ul ').向上滑动("正常");//不用切换()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏$(这个)。CSS({ background : ' URL(images/statu _ close。gif)无重复左上角；'});$(这个)。下一个(' ul ').儿童('里').查找(' ul ').fadeOut("正常");$(这个)。下一个(' ul ').find('li:has(ul)').儿童(' a ').CSS({ background : ' URL(images/statu _ close。gif)无重复左上角；'});返回false } })；});/script/head dydiv class=' nav ' ul阿利href='# '一级菜单1/a ul class='child '阿利二级菜单1/a /li阿利二级菜单1/a ul class='child '阿利三级菜单1/a /li阿利三级菜单1/a /li /ul /li阿利二级菜单2/a ul class='child '阿利三级菜单2/a /li阿利三级菜单2/a ul class='child '阿利四级菜单/a /li阿利四级菜单1/a /li阿利四级菜单1/a ul class='child '阿利五级菜单1/a /li阿利五级菜单1/a /li阿利五级菜单1/a /li /ul /li /ul /li /ul /li /ul /li阿利一级菜单2/a ul等级='儿童'阿利href='# '二级菜单1/a /li阿利二级菜单1/a /li /ul /li阿利一级菜单3/a ul类=“儿童”阿利二级菜单1/a /li阿利二级菜单1/a /li /ul /li阿利一级菜单4/a /li /ul/div/body/html希望本文所述对大家的jquery程序设计有所帮助。