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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 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中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
百度地图api如何使用
2015/08/03 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python读写docx文件的方法
2018/05/08 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
django2.0扩展用户字段示例
2019/02/13 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
学生学习总结的自我评价
2013/10/22 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
如何写观后感
2015/06/19 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书