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封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- js 设计模式&&query
1. 语法: try{ //需要执行的代码 }catch(e){ //错误处理 e程序遇到错误时的报错信息 } 2.惰性函数: 函数在第一次 ...
- 程序员过关斩将--cookie和session的关系其实很简单
月高风下,下班路上.... 菜菜哥,告诉你一个秘密,但是不允许告诉任何人 这么秘密,你有男票了?~ 不是,昨天我偷偷去面试了,结果挂了 这不是好事吗,上天让公司留住你..... 好吧,不过还是要请教你 ...
- Socket I/O模型之select模型
socket网络编程中有多种常见的I/O模型: 1.blocking阻塞 2.nonblocking非阻塞 3.I/O multiplexing复用 4.signal driven 5.asynchr ...
- ModelAndViewContainer、ModelMap、Model详细介绍【享学Spring MVC】
每篇一句 一个开源的技术产品做得好不好,主要是看你能解决多少非功能性问题(因为功能性问题是所有产品都能够想到的) 前言 写这篇文章非我本意,因为我觉得对如题的这个几个类的了解还是比较基础且简单的一块内 ...
- ASP.NET Core 2.2 : 二十七. JWT与用户授权（细化到Action）
上一章分享了如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新,本章继续进行下一步,用户授权.涉及到的例子也以上一章的为基础.(ASP.NET Core 系列目录) 一.概述 ...
- 通过代码审计找出网站中的XSS漏洞实战(三)
一.背景 笔者此前录制了一套XSS的视频教程,在漏洞案例一节中讲解手工挖掘.工具挖掘.代码审计三部分内容,准备将内容用文章的形式再次写一此,前两篇已经写完,内容有一些关联性,其中手工XSS挖掘篇地址为 ...
- HashMap原理。图文并茂式解读。这些注意点你一定还不了解
目录 概述 属性详解 table entrySet size modCount threshold.loadFactor 源码知识点必备 getGenericInterfaces和getInterfa ...
- 【JVM从小白学成大佬】6.创建对象及对象的访问定位
<JVM从小白学成大佬>系列推出到现在,收到了很多小伙伴的好评,也收到了一些小伙伴的建议,在此表示感谢. 有几个小伙伴提出了希望出一篇介绍对象的创建及访问,猿人谷向来是没有原则的,小伙们要 ...
- POJ 2155 Matrix （2维树状数组）
POJ-Matrix 题意:给你一个n*n矩阵的灯泡,灯泡的初始状态都为0,T次操作,分别是翻转操作:将x1,y1 --- x2, y2的灯泡状态反转 和 查询操作 找出x1, y1位置灯泡的状态. ...
- 蚂蚁SOFA系列(1) - 聊聊SOFA的模块化
作者:404,转载请注明出处.欢迎关注公众号:404P. SOFA是蚂蚁自研的一套金融级分布式中间件,目前正在逐步向业界开源.SOFA的全称有两个,最早是Service Oriented Fabric ...