源码下载地址：
链接：https://pan.baidu.com/s/1x9c1...
提取码：2bzr
如果有赞就很幸福了.

今天要和你们分享的是我看了JQuery库的手风琴列表样式。
它的核心在于它的JQuery代码思想，对于html或者是css都是次要的，在前端中，这种列表十分常用，一起学习起来吧。
开始讲解前，为大家做一些知识储备，在接下来的实操中会用到。

1.on()方法：在被选元素及子元素上添加一个或多个事件处理程序，它有三个参数。
event：事件名称，例如click.
childSelector:指定的子元素上的事件处理程序,不是选择器本身.
function:事件发生时运行的函数.
在实践中的会这样体现这个方法：

  1. $(".accordion > li").on('click', '.link', function(){ // }

2.slideToggle()方法
在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
该方法检查被选元素的可见状态。
如果一个元素是隐藏的，则运行 slideDown()
如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。

3.parent()方法
表示当前选择器选中元素的父级

4.childern()方法
表示当前选择器选中元素的子级

5.toggleClass()方法
添加或者移除一个类名

6.find()方法
返回被选元素的后代元素，可以指定class为哪个名称。

接下来分为三个模块跟大家来讲解：

Html模块：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>菜单</title>
  6.     <link rel="stylesheet" type="text/css" href="css/nav.css">//导入css文件
  7.     <link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> //图标样式
  8.     <script src="js/jquery-3.1.1.min.js"></script>
  9.     <script src="js/nav.js"></script>
  10. </head>
  11. <body>
  12.     <div>
  13.         <ul id="accordion" class="accordion">
  14.             <li>//这一层为列表标题栏目，点击可以展开
  15.                 <div class="link"><i class="fa fa-paint-brush "></i>语音技术voice<i class="fa fa-chevron-down"></i></div>
  16.                 <ul  class="submenu">
  17.                     <li><a href="#">语音识别</a></li>
  18.                     <li><a href="#">语音合成</a></li>
  19.                     <li><a href="#">语音唤醒</a></li>
  20.                     <li><a href="#">智能呼叫中心</a></li>
  21.                 </ul>
  22.             </li>
  23.             <li>
  24.                 <div class="link"><i class="fa fa-code"></i>图像技术photo<i class="fa fa-chevron-down"></i></div>
  25.                 <ul  class="submenu">
  26.                     <li><a href="#">文字识别</a></li>
  27.                     <li><a href="#">图像识别</a></li>
  28.                     <li><a href="#">图像审核</a></li>
  29.                     <li><a href="#">图像搜索</a></li>
  30.                 </ul>
  31.             </li>
  32.             <li>
  33.                 <div class="link"><i class="fa fa-mobile"></i>人脸与人体识别face<i class="fa fa-chevron-down"></i></div>
  34.                 <ul  class="submenu">
  35.                     <li><a href="#">人脸识别</a></li>
  36.                     <li><a href="#">人体分析</a></li>
  37.                 </ul>
  38.             </li>
  39.             <li>
  40.                 <div class="link"><i class="fa fa-globe"></i>视频技术video<i class="fa fa-chevron-down"></i></div>
  41.                 <ul  class="submenu">
  42.                     <li><a href="#">视频内容分析</a></li>
  43.                     <li><a href="#">视频封面选取</a></li>
  44.                     <li><a href="#">视频比对检索</a></li>
  45.                     <li><a href="#">视频内容审核</a></li>
  46.                 </ul>
  47.             </li>
  48.         </ul>
  49.     </div>
  50. </body>
  51. </html>

CSS板块

  1. * {
  2.     margin:0;
  3.     padding:0;
  4.     -webkit-box-sizing:border-box;
  5.     -moz-box-sizing:border-box;
  6.     box-sizing:border-box
  7. } /*初始化*/
  8. body {
  9.     background:#2d2c41;
  10.     font-family:open sans, Arial, Helvetica, Sans-serif, Verdana, Tahoma;
  11. } /*使用什么字体*/
  12. ul {
  13.     list-style-type:none; /*去掉前面小圆点*/
  14. }
  15. .accordion {
  16.     max-width: 360px;
  17.     width: 100%;
  18.     background-color: #ffffff;
  19.     -webkit-border-radius:4px;
  20.     -moz-border-radius:4px;
  21.     border-radius: 4px;
  22.     margin: 30px auto 20px;
  23. }
  24. .accordion .link{
  25.     cursor: pointer;
  26.     display: block;
  27.     padding: 15px 15px 15px 42px;
  28.     color: #4d4d4d;
  29.     font-size: 14px;
  30.     font-weight:700;
  31.     border-bottom:1px solid #ccc;
  32.     position:relative;
  33. }
  34. .accordion li i {
  35.     position:absolute;
  36.     top:16px;
  37.     left:12px;
  38.     font-size:18px;
  39.     color:#595959;
  40. }
  41. .accordion li i.fa-chevron-down {
  42.     right:12px;
  43.     left:auto;
  44.     font-size:16px
  45.     -webkit-transition:all .4s ease;
  46.     -o-transition:all .4s ease;
  47.     transition:all .4s ease
  48. }
  49. .submenu {
  50.     display:none;
  51.     background:#444359;
  52.     font-size:14px
  53. }
  54. .display{
  55.     display: block;
  56. }
  57. .submenu li {
  58.     border-bottom:1px solid #4b4a5e
  59. }
  60. .submenu a {
  61.     display:block;
  62.     text-decoration:none;
  63.     color:#d9d9d9;
  64.     padding:12px;
  65.     padding-left:42px;
  66.     -webkit-transition:all .25s ease;
  67.     -o-transition:all .25s ease;
  68.     transition:all .25s ease
  69. }
  70. .submenu a:hover {
  71.     background:#b63b4d;
  72.     color:#fff;
  73. }
  74. .fa-chevron-down-hover{ /* JQ对它的操作：点击后添加这个class，再次点击后去除这个class*/
  75.     -webkit-transform:rotate(180deg);
  76.     -ms-transform:rotate(180deg);
  77.     -o-transform:rotate(180deg);
  78.     transform:rotate(180deg)
  79. }

JQ部分（重点）

  1. $(function(){
  2.     $(".accordion > li").on('click', '.link', function() {
  3.         $(this).next(".submenu").slideToggle(500);
  4.         //这里的this代表的就是html模块中:class为link的div;link的next()就为submenu，功能为：下拉列表的出现与消失
  5.         $(this).parent().siblings().children('.submenu').slideUp(500);
  6.         //如果一个列表展开，其他的兄弟列表就要收起
  7.         $(this).find(".fa-chevron-down").animate().toggleClass("fa-chevron-down-hover");
  8.         //关于图标旋转问题，点击一下旋转180度，再次点击回来原来的位置
  9.         $(this).parent().siblings().children(".link").find(".fa-chevron-down").animate().removeClass("fa-chevron-down-hover");
  10.         //除了被点击的li，所有的li都要去掉fa-chevron-down-hover 这个class
  11.         console.log("方法被执行");
  12.     });
  13. });

以上就是我今天的分享
有时候要学会与未来的自已对话，不要被未来的自已当成陌生人，问未来的自已你想要现在的我：为你做一些什么样的努力.
希望我们都一直在进步的路上.

《第40天 : JQuery - 手风琴列表》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Python 入门之 软件开发规范

    Python 入门之 软件开发规范 1.软件开发规范 -- 分文件 (1)为什么使用软件开发规范: 当几百行--大几万行代码存在于一个py文件中时存在的问题: 不便于管理 修改 可读性差 加载速度慢 ...

  2. vs2012编译CZMQ-2.2.0

    1.下载源代码包 到地址http://download.zeromq.org/czmq-2.2.0.zip下载源代码,解压缩到czmq-2.2.0文件夹下如图所看到的 watermark/2/text ...

  3. 25、Python之禅

    要求: 爬取网页你好,蜘蛛侠!中的Python之禅中英文版本,并且打印.   目的: 练习使用selenium爬取动态网页的信息. 练习selenium与BeautifulSoup的搭配使用.     ...

  4. vue学习【四】vuex快速入门

    大家好,我是一叶,今天我们继续踩坑.今天的内容是vuex快速入门,页面传值不多的话,不建议vuex,直接props进行父子间传值就行,使用vuex就显得比较臃肿. 我们先预览一下效果,如图1所示. 图 ...

  5. 【TensorFlow探索之一】MNIST的初步尝试

    最近在学习TensorFlow,尝试的第一个项目是MNIST.首先给出源码地址. 1 数据集的获取 我们可以直接运行下面的代码,来获取到MNIST的数据集. from tensorflow.examp ...

  6. 绕过CDN找到真实IP

    现在很多大型企业都会使用CDN内容分发网络,因为CDN存在多个缓存服务点,而且会根据用户IP地址,将用户请求导向到最近的服务点上进行相应,所以得不到主服务站点的ip地址,总结学习一下绕过CDN找到真实 ...

  7. 跨平台开发框架DevExtreme v19.1.4正式发布｜附下载

    DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...

  8. c语言数组那些骚事儿

    找出最大和第二大值#include <stdio.h> #include <stdlib.h> #include <time.h> int main() { , , ...

  9. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

  10. try-catch-finally try中有rerun 是否执行finally

    finally块的语句在try或catch中的return语句执行之后返回之前执行且finally里的修改语句可能影响也可能不影响try或catch中 return已经确定的返回值,若finally里 ...