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 创建Dom元素
May 07 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
JavaScript oncopy事件用法实例解析
May 13 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长字符串定义方法
2012/07/12 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python解决字典中的值是列表问题的方法
2013/03/04 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python flask实现分页效果
2017/06/27 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
人事主管的岗位职责
2013/11/16 职场文书
给女朋友的道歉信
2014/01/10 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
微信营销策划方案
2014/02/24 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
银行先进个人总结
2015/02/15 职场文书
护理自荐信
2019/05/14 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
分享一些Java的常用工具
2021/06/11 Java/Android