JQuery学习笔记之手网琴效果
这种东西在网上多的是，最近在学JQuery，所以就写了个随笔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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 () {
//方法1.鼠标悬浮显示和隐藏
// var $li = $(".wrap>.menu>li");
// $li.mouseenter(function(){
// $(this).find(".child-ul").show();
// //让其他的全部隐藏,这个其实不用写,我们只要写一个离开隐藏就好了
// });
// $li.mouseleave(function(){
// $(this).find(".child-ul").hide();
// });
//方式2.点击显示和关闭
// var $li = $(".wrap>.menu>li");
// $li.on("click", function() {
// $(this).find(".child-ul").show();
// //让其他兄弟隐藏
// $(this).siblings().find(".child-ul").hide();
// });
// 方式3.有个动画隐藏和显示,
$(".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>
JQuery学习笔记之手网琴效果的更多相关文章
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- go语言，golang学习笔记1 官网下载安装，中文社区，开发工具LiteIDE
go语言,golang学习笔记1 官网下载安装,中文社区,开发工具LiteIDE Go语言是谷歌2009发布的专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之插件开发（4）
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- c++自由的转换string和number
string转数字 #include <string> #include <sstream> //使用stringstream需要引入这个头文件 //模板函数:将string类 ...
- Docker学习总结(四)--应用部署
MySQL部署 1) 拉取 mysql 镜像 docker pull centos/mysql:5.7 2) 创建容器 docker run -di --name=mysql -p 33306:330 ...
- 体验RxJava
RxJava是 ReactiveX在 Java上的开源的实现,简单概括,它就是一个实现异步操作的库,使用时最直观的感受就是在使用一个观察者模式的框架来完成我们的业务需求: 其实java已经有了现成的观 ...
- YARN底层基础库
YARN基础库是其他一切模块的基础,它的设计直接决定了YARN的稳定性和扩展性,YARN借用了MRV1的一些底层基础库,比如RPC库等,但因为引入了很多新的软件设计方式,所以它的基础库更多,包括直 ...
- spss数据分析可以被人工智能替换吗
作为一名需要对课题进行研究的大学生,我在日常学习中经常需要用到spss,虽然老师上课已经初步教了我如何用这个软件,然而,在使用过程中我还是遇到了许多问题.具体来说,就是这个软件在很多地方都不够与时俱进 ...
- 分布式唯一ID生成算法-雪花算法
在我们的工作中,数据库某些表的字段会用到唯一的,趋势递增的订单编号,我们将介绍两种方法,一种是传统的采用随机数生成的方式,另外一种是采用当前比较流行的“分布式唯一ID生成算法-雪花算法”来实现. 一. ...
- 图论之拓扑排序 poj 2367 Genealogical tree
题目链接 http://poj.org/problem?id=2367 题意就是给定一系列关系,按这些关系拓扑排序. #include<cstdio> #include<cstrin ...
- hdu2082 找单词 母函数模板
找单词 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- BZOJ 1036: [ZJOI2008]树的统计Count（树链剖分+单点更新+区间求和+区间求最大值）
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1036 题意:略. 题解:树链剖分模版,注意一些细节即可. #include <ios ...
- Ubuntu开机出现grub指令，无法正常开机
问题 最近开机出现了如下的界面: 分析问题 首先看看GNU GRUB是什么东东?干什么用的? GNU GRUB是多重引导加载程序.通俗点说,它就是用来一个可以让你选择运行什么操作系统的程序. 在你开机 ...