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 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
Jquery Datatables的使用详解
Jan 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
晶体管来复再生式二管收音机
2021/03/02 无线电
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python可视化text()函数使用详解
2020/02/11 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python如何将字符串转换为日期
2020/07/31 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
网络编辑岗位职责
2014/03/18 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
借钱欠条怎么写
2015/07/03 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android