jQuery实现可展开折叠的导航效果示例

本文实例讲述了jQuery实现可展开折叠的导航效果。分享给大家供大家参考，具体如下：

！doctype html html lang=' en ' hearta charset=' UTF-8 '标题文档/标题样式* { padd : 0；保证金： 0；}李{列表式-类型：无；}车身{ margin : 50pxfont-family : \ 5 FAE \ 8F6F \ 96 C5 \ 9ED1，' Arial '；} a { text-decoration : nonecolor: # f00}h3{ cursor:指针；}/style/head dyh 3导航一/h3ul style=' display : none ' lia href=' # ' 11111/a/Li lia href=' # ' 11111/a/Li lia href=' # ' 11111/a/Li lia href=' # ' 11111/a/Li/ulh3导航二/h3ul style=' display : none ' lia href=' # ' 22222/a/Li lia href=' # ' 22222/a/Li lia href=' # ' 22222/a/Li lia href=' # 22222/a/Li/ulh3导航三/h3ul style=' display : none ' lia href=' # ' 33333/a/Li lia href=' # ' 33333/a/Li lia href=' # ' 33333/a/Li lia href=' # ' 33333/a/Li/ulscript src=' http : jquery-1。 7 .2 .量滴js '/script script src=' http 3360 jquery。放松。1。var OBtn=$(' H3 ')；oBtn.click(function(){ $(this)).下一个(' ul ').slideToggle().兄弟姐妹(' ul ').向上滑动()；});});/脚本/正文/html运行效果图如下：

附：jquery.easing.1.3.js动画效果扩展插件可点击如下链接本站下载：

//www .JB 51。net/jiao Ben/32922。超文本标记语言

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。