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封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- gradle引jar包，引工程
gradle引jar包有直接引mvn仓库的,也有引本地的,引本地jar包需要: compile files("xxxxxx.jar")
- MySql基础架构以及SQL语句执行流程
01. mysql基础架构 SQL语句是如何执行的 学习一下mysql的基础架构,从一条sql语句是如何执行的来学习. 一般我们写一条查询语句类似下面这样: select user,password ...
- Leetcode之二分法专题-153. 寻找旋转排序数组中的最小值（Find Minimum in Rotated Sorted Array）
Leetcode之二分法专题-153. 寻找旋转排序数组中的最小值(Find Minimum in Rotated Sorted Array) 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ...
- ES6之解构
1.ES6允许按照一定的模式,从数组中和对象中提取值,对变量进行赋值,这种称为解构(Distructuring): let [a,b,c] = [3,5,6];// 相当于 a=3,b=5,c=6 本 ...
- 如何理解JS中this指向的问题
首先,用一句话解释this,就是:指向执行当前函数的对象. 当前执行,理解一下,也就是说this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定.this到底指向谁?this的最终指向的 ...
- Python--编码与字符串
为什么字符串要编码呢? 因为计算机只能处理数字,最底层的CPU只能识别0和1.所以字符串就需要编码成对应的数字. 在计算机中,最开始只有ASCII,我们开始接触计算机编程时就学了ASCII码.最早只有 ...
- 洛谷 P1262 【间谍网络】
题库 : 洛谷 题号 : 1262 题目 : 间谍网络 link : https://www.luogu.org/problemnew/show/P1262 思路 : 这题可以用缩点的思想来做.先用T ...
- 第8章 浏览器对象模型BOM 8.2 location对象
location 是最有用的 BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.事实上, location 对象是很特别的一个对象,因为它既是 window 对象的属性, ...
- HDU-6333 Problem B. Harvest of Apples 莫队
HDU-6333 题意: 有n个不同的苹果,你最多可以拿m个,问有多少种取法,多组数据,组数和n,m都是1e5,所以打表也打不了. 思路: 这道题要用到组合数的性质,记S(n,m)为从n中最多取m个的 ...
- HDU 4607 Park Visit 树的最大直径
题意: 莱克尔和她的朋友到公园玩,公园很大也很漂亮.公园包含n个景点通过n-1条边相连.克莱尔太累了,所以不能去参观所有点景点. 经过深思熟虑,她决定只访问其中的k个景点.她拿出地图发现所有景点的入口 ...