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实现table单双行不同显示并能单行选中
Jul 25 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
python如何实现单链表的反转
2020/02/10 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
高中毕业生自我鉴定范文
2013/09/26 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
廉洁自律个人总结
2015/02/14 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
面试通知邮件
2015/04/20 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Python3的进程和线程你了解吗
2022/03/16 Python
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers