jquery实现折叠菜单效果【推荐】


Posted in Javascript onMarch 08, 2017

这是一个简单的折叠框效果实现,核心内容jQ库里的slideToggle()方法

效果图如下:

jquery实现折叠菜单效果【推荐】jquery实现折叠菜单效果【推荐】

css代码:

.con_ul{

  padding: 0;
  margin: 0;
  overflow: auto;
  }
  .con_ul li{
  list-style: none;
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #CCCCCC;
  }
  .con_ul li .title{
  padding-right: 20px;
  background-image: url(images/drop_1fcaf417.png);//默认的背景
  background-position: 100% 0px;
  background-repeat: no-repeat;
  }
  .con_ul li .title.act{
  padding-right: 20px;
  background-image: url(images/top.png);//展开后的背景
  background-position: 100% 0px;
  background-repeat: no-repeat;
  }
  .con{
  background-color: #F4F4F4;
  display: none;//内容本分默认隐藏
  padding: 5px;
  margin: 10px 0;
  }

html代码:使用ul li的布局本菜认为代码结构更简洁清晰

<ul class="con_ul">
  <li>
  <div class="title">
   标题
  </div>
  <div class="con">
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>  
  </li>
  <li>
  <div class="title">
   标题
  </div>
  <div class="con">
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>  
  </li>
  <li>
  <div class="title">
   标题
  </div>
  <div class="con">
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>  
  </li>
 </ul>

javascript代码:

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
 <script>
  $('.con_ul li .title').click(function(){    
  $(this).toggleClass('act');//获取当前点击对象,切换act类,达到切换背景箭头的效果
  $(this).next().slideToggle();/获取当前点击对象的下一个兄弟级,实现折叠效果切换  
  })
 </script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 #Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 #Javascript
bootstrap实现动态进度条效果
Mar 08 #Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 #Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 #Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 #Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 #Javascript
You might like
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python模拟Django框架实例
2016/05/17 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
办公室年终个人自我评价
2013/10/28 职场文书
应聘自荐信
2013/12/14 职场文书
财政局长自荐信范文
2013/12/22 职场文书
办理护照介绍信
2014/01/16 职场文书
成绩单家长评语大全
2014/04/16 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
python tkinter Entry控件的焦点移动操作
2021/05/22 Python