基于jQuery实现简单的折叠菜单效果
2019/6/29 21:51:34
本文主要是介绍基于jQuery实现简单的折叠菜单效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:
Html代码如下:
<div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a></li> </ul> <p>菜单二</p> <ul> <li><a>2222</a></li> <li><a>2222</a></li> <li><a>2222</a></li> </ul> <p>菜单三</p> <ul> <li><a>3333</a></li> <li><a>3333</a></li> <li><a>3333</a></li> </ul> </div>
插件实现代码如下:
(function ($) { $.fn.Fold = function (options) { //默认参数设置 var settings = { speed: 300 //折叠速度(值越大越慢) } //不为空则合并参数 if (options) $.extend(settings, options); //遵循链式原则 return this.each(function () { //为每个p元素绑定点击事件 $("> p", this).each(function () { $(this).bind("click", function () { $(this).next("ul").slideToggle(settings.speed); }); }); //默认第一个展开,其它折叠 $("> ul", this).hide().first().show(); }); } })(jQuery);
这里就不作讲解了,注释都写明了。
示例DEMO如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul,ul li{ list-style:none;} .box{ width:250px; margin:50px auto; border:1px solid gray;} .box p{ background-color: Green;color: white;cursor: pointer;font-weight: bold; line-height: 40px;padding-left: 15px;} </style> </head> <body> <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a></li> </ul> <p>菜单二</p> <ul> <li><a>2222</a></li> <li><a>2222</a></li> <li><a>2222</a></li> </ul> <p>菜单三</p> <ul> <li><a>3333</a></li> <li><a>3333</a></li> <li><a>3333</a></li> </ul> </div> <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../js/jquery.similar.Fold.js" type="text/javascript"></script> <script type="text/javascript"> $(".box").Fold(); </script> </body> </html>
希望本文所述对大家学习jquery程序设计有所帮助。
这篇关于基于jQuery实现简单的折叠菜单效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习