基于jQuery实现简单的折叠菜单效果

本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下：运行效果截图如下：

超文本标记语言代码如下：

div class='box' p菜单一/p ul 1111/a/Li Li 1111/a/Li Li 1111/a/Li/ul p菜单二/p ul lia 2222/a/Li lia 2222/a/Li lia 2222/a/Li/ul p菜单三/p ul lia 3333/a/Li lia 3333/a/Li lia 3333/a/Li/ul/div插件实现代码如下：

（函数($) { $.fn.Fold=函数（选项){ //默认参数设置定义变量设置={ speed: 300 //折叠速度（值越大越慢) } //不为空则合并参数如果(选项)$。扩展（设置，选项);//遵循链式原则返回this.each(function () { //为每个p元素绑定点击事件$(' p '，这个)。每个（函数(){ $(此)).bind('click ')，function () { $(this).下一个(' ul ').滑动切换(设置。速度);});});//默认第一个展开，其它折叠$(' ul '，这个)。隐藏()。第一个()。show()；});} })(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 ' head title/title style=' text/CSS ' * { padd :0；margin:0} ul，ul Li { list-style : none；} .盒子{宽度：250pxmargin:50px汽车；border:1px纯灰色；} .盒子p{背景色-:绿色；颜色：白色；光标：指针；字体粗细：粗体；线高： 40px左衬垫left : 15px }/style/head body div class=' box ' p菜单一/p ul 1111/a/Li Li 1111/a/Li Li 1111/a/Li/ul p菜单二/p ul lia 2222/a/Li lia 2222/a/Li lia 2222/a/Li/ul p菜单三/p ul lia 3333/a/Li lia 3333/a/Li lia 3333/a/Li/ul/div脚本src='http:/js/jquery-1。4 .1 .量滴js ' type=' text/JavaScript '/script script src=' http :/js/jquery。很简单。折叠。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(' .方框')。fold()；/脚本/正文/html希望本文所述对大家学习jquery程序设计有所帮助。