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


Posted in Javascript onNovember 23, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
jquery自定义表格样式
Nov 23 #Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 #Javascript
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
PHP中动态HTML的输出技术
2006/10/09 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
js中有关IE版本检测
2012/01/04 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
如何把python项目部署到linux服务器
2020/08/26 Python
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
施工资料员岗位职责
2014/01/06 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书