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封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- HOWTO: Avizo/Amira/Pergeos中如何利用Volume Edit
操作非常简单,就是利用Volume Edit取圆柱的同时可以取一个Mask(或称之为ROI,感兴趣区域,蒙板等) 如上图,利用Volume Edit取一个圆柱,然后点击Create Mask创建一个M ...
- JavaScript计算平方数的三种方法
console.log(2*10**3) console.log(2*Math.pow(10,3)) console.log(2e3) console.log(2*1e3) console.log(2 ...
- unity编辑器扩展_07（创建对话框，检测按钮的点击，点击按钮后提示信息，保存设置的数据，显示点击按钮后的处理的进度条信息)
代码: using UnityEditor;using UnityEngine; public class ChangeValue : ScriptableWizard { ...
- 简单使用AspectJ
AspectJ是一个AOP框架,由于SpringAOP的配置过于繁琐,因此使用了AspectJ依赖注解开发 1.Aspecj依赖坐标,此处省略了Spring相关依赖 <dependency> ...
- SqlServer关于“无法删除数据库 "XXXX"，因为该数据库当前正在使用”问题的解决方案
引言 在项目中,通过使用SQL语句“DROP DATABASE [数据库名]”删除数据时,一直出现“无法删除数据库 "XXXX",因为该数据库当前正在使用”的错误信息,经测试在Sq ...
- 🕸捕获与改写HTTPS请求
前言 本文站在 macOS 用户的角度下,分享一下对 HTTPS 进行请求拦截.对响应进行修改的经验. 要注意的是,本文介绍的工具虽然一定程度上对 Windows 用户也适用 ,但并非所有工具都是免费 ...
- [企业微信通知系列]Jenkins发布后自动通知
一.前言 最近使用Jenkins进行自动化部署,但是部署后,并没有相应的通知,虽然有邮件发送通知,但是发现邮件会受限于接收方的接收设置,导致不能及时看到相关的发布内容.而由于公司使用的是企业微信,因此 ...
- SyntaxError: invalid syntax ： if not 0 <= time_low < 1<<32L:
报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/2.NLP/8.高阶实践/1.PipelineQ ...
- 【selenium】- selenium IDE的安装以及使用
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1. 自动化测试工程师的任务 一个合格的自动化测试工程师,需要把框架搭建起来.让不是自动化测试的人,一个普通功能化测试的人,可以完成自动化测试 ...
- Python和Sublime安装教程
Python安装 安装python可以去https://www.python.org官网下载 点开官网后点击下图我圈出来的地方 然后翻到页面最后,选择要安装的版本 点击下载后打开,将 Add Pyt ...