基于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 相关文章推荐
jquery的ajax请求全面了解
Mar 20 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
学习Angularjs分页指令
Jul 01 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
详解vue项目构建与实战
Jun 27 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
php json相关函数用法示例
2017/03/28 PHP
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
linux下python抓屏实现方法
2015/05/22 Python
Python数据结构之单链表详解
2017/09/12 Python
python 切换root 执行命令的方法
2019/01/19 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
农村葬礼主持词
2014/03/31 职场文书
党风廉设责任书
2014/04/16 职场文书
实习护士自荐信
2014/06/21 职场文书
入党个人总结范文
2015/03/02 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
MySQL中连接查询和子查询的问题
2021/09/04 MySQL