发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
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); //为每个p元素绑定点击事件 $("> p", this).each(function () { $(this).bind("click", function () { $(this).next("ul").slideToggle(settings.speed); }); }); //默认第一个展开,其它折叠 $("> ul", this).hide().first().show(); //遵循链式原则 return this.each(function () { }); } })(jQuery);
这里就不作讲解了,注释都写明了。
示例DEMO如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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>
效果图片:
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
jQuery带评论的星星评分代码
<li><ahref="javascript:void(0)" title="1"class="one-star">1</a></li><li><ahref="javascript:void(0)" title="2&...
下拉菜单项封装,使用图标字体实现
ASP.NET Core开发学生信息管理系统(二)
namespace SMS.Models{ /// <summary> /// 用户-角色模型 /// </summary> public class UserRole { /// <summary> //...
【导航菜单特效】展开合拢的jQuery折叠菜单,手风琴面板
【导航菜单特效】展开合拢的jQuery折叠菜单,手风琴面板。以下是三零网为大家整理的最新【导航菜单特效】展开合拢的jQuery折叠菜单,手风琴面板的文章,希望大家能够喜欢!
jQuery---下拉菜单案例
js二级菜单
}/* tj_submain */.tj_submain{border:1px solid #c8d2e5;}.tj_submain .title{background:url("images/bg_01.gif") repeat-x 0 -38px;}.tj_submain li{width:181px;}.tj_submain li a{width...
总结JS经典案例
写法一:// 动画之前先调用 stop(),避免出现动画队列// slideDown()、fadeOut()、fadeIn()参数1动画耗时,参数2动画完毕执行的动作$(".ad").stop().slideDown(1000,function(){$(".ad&...
jquery.treeview.js树控件
JQuery实现动态生成树形菜单
<li><span class="folder">Folder 1</span><li><span class="file">Item 1.1</span></li><li><span class="file"&...
微信扫码,在手机上查看选中内容