《第40天 : JQuery - 手风琴列表》
源码下载地址:
链接:https://pan.baidu.com/s/1x9c1...
提取码:2bzr
如果有赞就很幸福了.
今天要和你们分享的是我看了JQuery库的手风琴列表样式。
它的核心在于它的JQuery代码思想,对于html或者是css都是次要的,在前端中,这种列表十分常用,一起学习起来吧。
开始讲解前,为大家做一些知识储备,在接下来的实操中会用到。
1.on()方法:在被选元素及子元素上添加一个或多个事件处理程序,它有三个参数。
event:事件名称,例如click.
childSelector:指定的子元素上的事件处理程序,不是选择器本身.
function:事件发生时运行的函数.
在实践中的会这样体现这个方法:
$(".accordion > li").on('click', '.link', function(){ // }
2.slideToggle()方法
在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
该方法检查被选元素的可见状态。
如果一个元素是隐藏的,则运行 slideDown()
如果一个元素是可见的,则运行 slideUp() - 这会造成一种切换的效果。
3.parent()方法
表示当前选择器选中元素的父级
4.childern()方法
表示当前选择器选中元素的子级
5.toggleClass()方法
添加或者移除一个类名
6.find()方法
返回被选元素的后代元素,可以指定class为哪个名称。
接下来分为三个模块跟大家来讲解:
Html模块:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜单</title>
<link rel="stylesheet" type="text/css" href="css/nav.css">//导入css文件
<link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> //图标样式
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/nav.js"></script>
</head>
<body>
<div>
<ul id="accordion" class="accordion">
<li>//这一层为列表标题栏目,点击可以展开
<div class="link"><i class="fa fa-paint-brush "></i>语音技术voice<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">语音识别</a></li>
<li><a href="#">语音合成</a></li>
<li><a href="#">语音唤醒</a></li>
<li><a href="#">智能呼叫中心</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-code"></i>图像技术photo<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">文字识别</a></li>
<li><a href="#">图像识别</a></li>
<li><a href="#">图像审核</a></li>
<li><a href="#">图像搜索</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-mobile"></i>人脸与人体识别face<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">人脸识别</a></li>
<li><a href="#">人体分析</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-globe"></i>视频技术video<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">视频内容分析</a></li>
<li><a href="#">视频封面选取</a></li>
<li><a href="#">视频比对检索</a></li>
<li><a href="#">视频内容审核</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS板块
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
} /*初始化*/
body {
background:#2d2c41;
font-family:open sans, Arial, Helvetica, Sans-serif, Verdana, Tahoma;
} /*使用什么字体*/
ul {
list-style-type:none; /*去掉前面小圆点*/
}
.accordion {
max-width: 360px;
width: 100%;
background-color: #ffffff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
margin: 30px auto 20px;
}
.accordion .link{
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4d4d4d;
font-size: 14px;
font-weight:700;
border-bottom:1px solid #ccc;
position:relative;
}
.accordion li i {
position:absolute;
top:16px;
left:12px;
font-size:18px;
color:#595959;
}
.accordion li i.fa-chevron-down {
right:12px;
left:auto;
font-size:16px
-webkit-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all .4s ease
}
.submenu {
display:none;
background:#444359;
font-size:14px
}
.display{
display: block;
}
.submenu li {
border-bottom:1px solid #4b4a5e
}
.submenu a {
display:block;
text-decoration:none;
color:#d9d9d9;
padding:12px;
padding-left:42px;
-webkit-transition:all .25s ease;
-o-transition:all .25s ease;
transition:all .25s ease
}
.submenu a:hover {
background:#b63b4d;
color:#fff;
}
.fa-chevron-down-hover{ /* JQ对它的操作:点击后添加这个class,再次点击后去除这个class*/
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg)
}
JQ部分(重点)
$(function(){
$(".accordion > li").on('click', '.link', function() {
$(this).next(".submenu").slideToggle(500);
//这里的this代表的就是html模块中:class为link的div;link的next()就为submenu,功能为:下拉列表的出现与消失
$(this).parent().siblings().children('.submenu').slideUp(500);
//如果一个列表展开,其他的兄弟列表就要收起
$(this).find(".fa-chevron-down").animate().toggleClass("fa-chevron-down-hover");
//关于图标旋转问题,点击一下旋转180度,再次点击回来原来的位置
$(this).parent().siblings().children(".link").find(".fa-chevron-down").animate().removeClass("fa-chevron-down-hover");
//除了被点击的li,所有的li都要去掉fa-chevron-down-hover 这个class
console.log("方法被执行");
});
});
以上就是我今天的分享
有时候要学会与未来的自已对话,不要被未来的自已当成陌生人,问未来的自已你想要现在的我:为你做一些什么样的努力.
希望我们都一直在进步的路上.
《第40天 : JQuery - 手风琴列表》的更多相关文章
- 简单物联网:外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- Python 入门之 软件开发规范
Python 入门之 软件开发规范 1.软件开发规范 -- 分文件 (1)为什么使用软件开发规范: 当几百行--大几万行代码存在于一个py文件中时存在的问题: 不便于管理 修改 可读性差 加载速度慢 ...
- vs2012编译CZMQ-2.2.0
1.下载源代码包 到地址http://download.zeromq.org/czmq-2.2.0.zip下载源代码,解压缩到czmq-2.2.0文件夹下如图所看到的 watermark/2/text ...
- 25、Python之禅
要求: 爬取网页你好,蜘蛛侠!中的Python之禅中英文版本,并且打印. 目的: 练习使用selenium爬取动态网页的信息. 练习selenium与BeautifulSoup的搭配使用. ...
- vue学习【四】vuex快速入门
大家好,我是一叶,今天我们继续踩坑.今天的内容是vuex快速入门,页面传值不多的话,不建议vuex,直接props进行父子间传值就行,使用vuex就显得比较臃肿. 我们先预览一下效果,如图1所示. 图 ...
- 【TensorFlow探索之一】MNIST的初步尝试
最近在学习TensorFlow,尝试的第一个项目是MNIST.首先给出源码地址. 1 数据集的获取 我们可以直接运行下面的代码,来获取到MNIST的数据集. from tensorflow.examp ...
- 绕过CDN找到真实IP
现在很多大型企业都会使用CDN内容分发网络,因为CDN存在多个缓存服务点,而且会根据用户IP地址,将用户请求导向到最近的服务点上进行相应,所以得不到主服务站点的ip地址,总结学习一下绕过CDN找到真实 ...
- 跨平台开发框架DevExtreme v19.1.4正式发布|附下载
DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...
- c语言数组那些骚事儿
找出最大和第二大值#include <stdio.h> #include <stdlib.h> #include <time.h> int main() { , , ...
- HTML5基础——笔记
HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- try-catch-finally try中有rerun 是否执行finally
finally块的语句在try或catch中的return语句执行之后返回之前执行且finally里的修改语句可能影响也可能不影响try或catch中 return已经确定的返回值,若finally里 ...