jquery实现可点击伸缩与展开的菜单效果代码

本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下：

这是一款jquery实现的点击伸缩与展开的菜单代码，操作方式大家都知道吧，点击一下展开二级菜单的内容，再次点击则合拢，很经典的折叠菜单。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-点击-显示-隐藏-菜单-样式-代码/

具体代码如下：

！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' /titleJQ点击伸缩、展开的菜单/title style type=' text/CSS ' body { font-family : Arial；font-size : 16px} dl { width: 300px}dl，DD { margin : 0；}dt {底色-颜色： # AE 8758背景-image : URL(images/201207。巴布亚新几内亚)；背景-重复：不重复；背景-位置：5像素13像素；font-size : 18pxpadd : 5px 5px 5px 20pxmargin 3360 2px高度：29 px行高：28 px} dt a { color : # FFF；文本装饰：无；} DD a { color : # 000 } ul { list-style : none；padd :5 px 5px 5px 20pxmargin 33600 } Li {行高：24 px}.BG {背景-位置：5 px-16px；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('dd ')).hide()；$('dt a ').单击(function(){ $(this)).父项()。切换类(' BG ')；$(这个)。父项()。预报警(' dt ').removeClass('bg') $(this).父项()。nextAll('dt ').removeClass('bg') $(this).父项()。下一个()。slide Toggle()；$(这个)。父项()。预报警(' dd ').向上滑动("慢");$(这个)。父项()。下一个()。nextAll('dd ').向上滑动("慢");返回false })；});/script/head dydl DTA href=' # '郑州美食/a/dt dd ul lia href='# '美食论坛/a/li lia href='# '地方小吃/a/li lia href='# '郑州酒店/a/li /ul /dd dta href='# '郑州交通/a/dt dd ul lia href='# '新郑机场/a/li lia href='# '周边高速/a/li /ul /dd dta href='# '郑州房产/a/dt dd ul lia href='# '房产论坛/a/li lia href='# '大河论坛/a/li lia href='# '天下中原/a/li /ul /dd/dl/body/html希望本文所述对大家的jquery程序设计有所帮助。