基于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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python实现简易通讯录修改版
2018/03/13 Python
设置python3为默认python的方法
2018/10/31 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python程序控制语句用法实例分析
2020/01/14 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Pycharm Git 设置方法
2020/09/15 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
职工运动会邀请函
2014/01/19 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
为自己工作观后感
2015/06/11 职场文书
行政处罚事先告知书
2015/07/01 职场文书