jQuery实现的简单手风琴效果示例


Posted in jQuery onAugust 29, 2018

本文实例讲述了jQuery实现的简单手风琴效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery手风琴效果</title>
  <style>
    .wrap{ width: 200px;height: auto;margin:50px auto;border-radius: 5px }
    ul,li,h4{list-style: none;margin: 0;padding: 0}
    .wrap>ul{border-radius: 5px }
    .wrap>ul>li{background: #E4644B;text-align: center;border-bottom: solid 1px #DED1D1;color:#fff;cursor: pointer;position: relative;}
    .wrap>ul>li:last-child{border-bottom: none;}
    .wrap>ul>li h4{padding:8px 0;}
    .wrap>ul li span{position: absolute;top: 5px;right: 12px;font-size: 22px;color: #fff;display: inline-block;}
    .wrap>ul>li .child-ul{background: #fff;display: none; }
    .wrap>ul>li .child-ul li{color: #000;line-height: 40px;}
  </style>
</head>
<body>
  <div class="wrap">
    <ul class="menu">
      <li>
        <h4>软件jiaoxue</h4>
        <span>+</span>
        <ul class="child-ul">
          <li>java</li>
          <li>web前端</li>
          <li>安卓开发</li>
          <li>软件测试</li>
        </ul>
      </li>
      <li>
        <h4>游戏动漫</h4>
        <span>+</span>
        <ul class="child-ul">
          <li>java</li>
          <li>web前端</li>
          <li>安卓开发</li>
          <li>软件测试</li>
        </ul>
      </li>
      <li>
        <h4>电商企业</h4>
        <span>+</span>
        <ul class="child-ul">
          <li>淘宝</li>
          <li>天猫</li>
          <li>京东</li>
          <li>苏宁易购</li>
        </ul>
      </li>
      <li>
        <h4>营销培训</h4>
        <span>+</span>
        <ul class="child-ul">
          <li>seo</li>
          <li>微信营销</li>
          <li>网络创业</li>
          <li>市场营销</li>
        </ul>
      </li>
    </ul>
  </div>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $(".wrap>ul>li").on("click",function(){
        var next = $(this).children(".child-ul");
        var icon = $(this).children("span");
        next.slideToggle('fade');
        if(icon.html()==="+"){
          icon.html("-");
        }else{
          icon.html("+");
        }
        $('.child-ul').not(next).slideUp('fast');//不是当前点击的内容全部向上收起
        $('.wrap>ul>li').children("span").not(icon).html("+");
        return false;
      })
    })
  </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,运行结果如下:

jQuery实现的简单手风琴效果示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
JQuery扩展对象方法操作示例
Aug 21 #jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 #jQuery
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
学习python可以干什么
2019/02/26 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python实现梯度法 python最速下降法
2020/03/24 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
python 6种方法实现单例模式
2020/12/15 Python
如何编写python的daemon程序
2021/01/07 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
城市精细化管理实施方案
2014/03/04 职场文书
购房个人委托书范本
2014/10/11 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
公司出纳岗位职责
2015/03/31 职场文书
培训计划通知
2015/07/15 职场文书
离职告别感言
2015/08/04 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android