jQuery实现可扩展的折叠面板菜单

本文通过一个实例说明jQuery可以实现可展开和折叠的手风琴式面板菜单。分享给大家参考。具体如下：

这是一个常见的折叠菜单，手风琴式的折叠面板，会展开和关闭，带有一些Flash动画效果，修改时请注意：

Slidewup:通过改变高度(向上递减)动态隐藏所有匹配的元素，并在隐藏完成后可选地触发回调函数。这个动画效果只调整元素的高度，这样匹配的元素就可以通过“滑动”来隐藏。

SlideDown:通过高度变化(向下增加)动态显示所有匹配的元素，并在显示完成后可选地触发回调函数。此动画效果仅调整元素的高度，因此匹配的元素可以“滑动”方式显示

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-上滑-下滑-sfq-style-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大灯折叠菜单/title script src=' http : jquery 1 . 3 . 2 . js '/script script $(文档)。ready(function(){ $(' DD : not(: first)')。hide()；//隐藏dd不是第一个。E:first:相当于e : eq(0)//$(' DD 3360 not(: last)')。hide()；//尝试$ ('dd:not (:last)')。hide()；$('dt a ')。单击(function(){$('dd:visible ')。向上滑动(“慢”)；$(这个)。父项()。下一个()。向下滑动(“慢”)；返回false});});/script style dl { width : 150 px；} dl，DD { margin : 0；} dt { background: grayfont-size : 14px；padding: 2pxmargin: 2px} dt a { color : # FFF；} dd a { color: # 000font-size : 12px；} ul { list-style : none；padding: 2px}/style/headleldta href=' # ' ASP/A/Dt DD Ullia href=' # '论坛社区/a/li lia href='# '新闻文章/a/li lia href='# '企业网站/A/Li/ul/dddta href=' # ' PHP/A/Dt DD ul lia href=' # '论坛社区/a/li lia href='# '博客主页/a /a/li /ul /dddta href='#=' # '脚本资源