基于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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
jquery实现手风琴案例
May 04 jQuery
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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
php cookie 详解使用实例
2016/11/03 PHP
php实现简单加入购物车功能
2017/03/07 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
jquery中radio checked问题
2015/03/16 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python print出共轭复数的方法详解
2019/06/25 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
django 消息框架 message使用详解
2019/07/22 Python
Python简易版图书管理系统
2019/08/12 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
如何启动时不需输入用户名与密码
2014/05/09 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
高中体育教学反思
2014/01/24 职场文书
管理建议书范文
2014/05/13 职场文书
禁毒宣传标语
2014/06/19 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB