展开&收起动画&案例
HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数)收起 slideUp(毫秒, 完成回调函数)切换 slideToggle(毫秒, 完成回调函数)案例：帷幔效果案例：下拉菜单js 中 == 与 === 的区别案例：显示隐藏更多案例：折叠菜单CSS cursor 属性：一些不同的光标。CSS3 transform 属性：旋转 div 元素end() 返回调用链的上一级。find() 搜索所有与指定表达式匹配的元素案例代码jQuery笔记目录
HTML DOM overflow 属性
overflow 属性规定如何处理如何处理不符合元素框的内容。
Object.style.overflow=visible|hidden|scroll|auto
具体示例：菜鸟教程 CSS overflow 属性
展开 slideDown(毫秒, 完成回调函数)
$(this).slideDown(1000)
收起 slideUp(毫秒, 完成回调函数)
$(this).slideUp(1000);
切换 slideToggle(毫秒, 完成回调函数)
$('.wm').slideToggle(1000);
案例：帷幔效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.box {width: 646px;height: 363px;margin: 100px auto;border: 1px solid orange;position: relative;overflow: hidden;}.box p {width: 100%;height: 100%;text-align: center;line-height: 360px;}.left {background: url("images/weiman_left.jpg") no-repeat;width: 343px;height: 363px;position: absolute;top: 0;left: 0;}.right {background: url("images/weiman_right.jpg") no-repeat;width: 303px;height: 363px;position: absolute;top: 0;right: 0;}</style></head><body><div class="box"><p>看什么看,关上!</p><div class="wm left"></div><div class="wm right"></div></div><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript">$(function () {$('body').click(function () {/*点击body部分，调用切换*/$('.wm').slideToggle(1000);});$('.left').click(function () {event.stopPropagation(); /*阻止传播，即阻止了点击body 的事件*/$(this).slideUp(1000); /*点击左边的帷幕div，则向上滑动*/});$('.right').click(function () {event.stopPropagation(); /*阻止传播，即阻止了点击body 的事件*/$(this).slideUp(1000); /*点击右边的帷幕div，则向上滑动*/})});</script></body></html>
运行效果：
点击左侧帷幕，则左侧帷幕上滑；
点击右侧帷幕，则右侧帷幕上滑；
点击没有帷幕的部分，则左右帷幕状态各自切换。
案例：下拉菜单
stop() 方法具体用法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery展开&收起动画案例-下拉菜单</title><style>* {padding: 0;margin: 0;list-style: none;}.firstNav {width: 600px;height: 44px;margin: 100px auto;border: 1px solid #cccccc;cursor: pointer; /*鼠标变为小手*/}.firstNav>li {width: 100px;float: left;text-align: center;}.firstNav>li>span {display: inline-block;width: 100%;height: 44px;line-height: 44px;}.secondNav {border: 1px solid #cccccc;border-top: none;}.secondNav>li {margin-top: 1px;}.secondNav {display: none;}.current .secondNav {display: block;}</style></head><body><ul class="firstNav"><li class="current"><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li><li><span>一级菜单1</span><ul class="secondNav"><li>二级菜单1</li><li>二级菜单2</li><li>二级菜单3</li><li>二级菜单4</li><li>二级菜单5</li></ul></li></ul><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript">$(function () {// 1.1 先让第一个二级菜单隐藏$('.firstNav>li.current .secondNav').css('display','none');// 1.2 监听鼠标进入/*$('.firstNav>li').hover(function () {$(this).children('.secondNav').slideDown(200);$(this).siblings().children('.secondNav').slideUp(200);},function () {$(this).children('.secondNav').slideUp(200);})// 此段代码与下面的代码效果相同*/$('.firstNav>li').hover(function () {// 给所有的一级菜单添加鼠标悬浮事件$(this).children('.secondNav').stop().slideToggle(200); // stop停止动画再调用切换，则只有当前元素有特效})});</script></body></html>
运行效果：
鼠标停在哪个一级菜单，则这个一级菜单下拉二级菜单，鼠标移走则收回。
js 中 == 与 === 的区别
== 叫做相等运算符，只要值相等即可为真。
=== 叫做严格运算符，不仅要求值相等，类型也要求相等。
案例：显示隐藏更多
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery展开&收起动画案例-显示隐藏更多</title><style>* {padding: 0;margin: 0;list-style: none;}.box {width: 450px;border: 1px solid #ccc;margin: 100px auto;text-align: center;}.box ul {overflow: hidden;}.box ul>li {width: 150px;height: 30px;line-height: 30px;text-align: center;float: left; /*设置浮动，不设置的话li会一排排显示*/}.box button {width: 150px;height: 30px;line-height: 30px;border: 1px solid #909EAB;text-align: center;margin: 10px 0;}</style></head><body><div class="box"><ul><li>香蕉</li><li>苹果</li><li>梨子</li><li>猕猴桃</li><li>橙子</li><li>桃子</li><li>哈密瓜</li><li>西红柿</li><li>西瓜</li><li>荔枝</li><li>榴莲</li><li>人生果</li></ul><button>显示更多</button></div><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript">$(function () {// 1.设置默认的隐藏$('.box>ul>li:gt(2)').hide() /*大于2的li隐藏*/// 2.监听按钮的点击$('.box>button').click(function () {// 2.1 改变文字var text = $(this).text() === '显示更多' ? '隐藏': '显示更多';$(this).text(text);$('.box>ul>li:gt(2)').slideToggle(); /*大于2的li进行切换*/})});</script></body></html>
运行效果：
默认只显示前三个；
点击显示更多，则显示全部，并且按钮改成隐藏；
点击隐藏，则只显示前三个，并且按钮改成显示更多。
案例：折叠菜单
CSS cursor 属性：一些不同的光标。
cursor 具体用法（菜鸟教程）
CSS3 transform 属性：旋转 div 元素
transform 具体用法（菜鸟教程）
end() 返回调用链的上一级。
即，将匹配的元素列表变为前一次的状态。end() 具体用法
find() 搜索所有与指定表达式匹配的元素
这个函数是找出正在处理的元素的后代元素的好方法。find() 具体用法
案例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery展开&收起动画案例-折叠菜单</title><style>* {padding: 0;margin: 0;list-style: none;}.nav {width: 300px;margin: 100px auto;border: 1px solid orange;}.top {width: 300px;height: 30px;line-height: 30px;box-sizing: border-box;background: orange;border-bottom: 1px solid white;cursor: pointer;}.top .arrow {background: url("images/arrow_right.png") no-repeat;float: right;width: 16px;height: 16px;margin-top: 7px;}.list {width: 100px;display: none;}</style></head><body><ul class="nav"><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li><li><div class="top"><span class="arrow"></span><span>一级菜单</span></div><div class="list"><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></div></li></ul><script type="text/javascript" src="lib/jquery-3.3.1.js"></script><script type="text/javascript">$(function () {// 1. 监听li标签的点击$('.nav>li').click(function () {$(this).children('.list').slideDown().end().siblings().children('.list').slideUp();// 2. 处理箭头旋转$('.top .arrow').css({'transform': 'rotate(0deg)'});$(this).find('.arrow').css({'transform': 'rotate(90deg)'});})});</script></body></html>
运行效果：
点击一级菜单，会产生二级菜单的下拉列表。
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
