【jQuery笔记Part2】02-jQuery展开&收起动画&帷幔效果案例&下拉菜单案例&显示隐藏更多案例&折叠菜单案例
展开&收起动画&案例
- HTML DOM overflow 属性
- 展开 slideDown(毫秒, 完成回调函数)
- 收起 slideUp(毫秒, 完成回调函数)
- 切换 slideToggle(毫秒, 完成回调函数)
- 案例：帷幔效果
- 案例：下拉菜单
- js 中 == 与 === 的区别
- 案例：显示隐藏更多
- 案例：折叠菜单
- CSS cursor 属性：一些不同的光标。
- CSS3 transform 属性：旋转 div 元素
- end() 返回调用链的上一级。
- find() 搜索所有与指定表达式匹配的元素
- 案例代码
HTML DOM overflow 属性
overflow 属性规定如何处理如何处理不符合元素框的内容。
Object.style.overflow=visible|hidden|scroll|auto
| 值 | 描述 |
|---|---|
| visible | 内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 由浏览器决定如何显示。如果需要，则显示滚动条。 |
具体示例：菜鸟教程 CSS overflow 属性
展开 slideDown(毫秒, 完成回调函数)
$(this).slideDown(1000)
收起 slideUp(毫秒, 完成回调函数)
$(this).slideUp(1000);
切换 slideToggle(毫秒, 完成回调函数)
$('.wm').slideToggle(1000);
案例：帷幔效果
<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() 方法具体用法
<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>一级菜单1span>
<ul class="secondNav">
<li>二级菜单1li>
<li>二级菜单2li>
<li>二级菜单3li>
<li>二级菜单4li>
<li>二级菜单5li>
ul>
li>
<li>
<span>一级菜单1span>
<ul class="secondNav">
<li>二级菜单1li>
<li>二级菜单2li>
<li>二级菜单3li>
<li>二级菜单4li>
<li>二级菜单5li>
ul>
li>
<li>
<span>一级菜单1span>
<ul class="secondNav">
<li>二级菜单1li>
<li>二级菜单2li>
<li>二级菜单3li>
<li>二级菜单4li>
<li>二级菜单5li>
ul>
li>
<li>
<span>一级菜单1span>
<ul class="secondNav">
<li>二级菜单1li>
<li>二级菜单2li>
<li>二级菜单3li>
<li>二级菜单4li>
<li>二级菜单5li>
ul>
li>
<li>
<span>一级菜单1span>
<ul class="secondNav">
<li>二级菜单1li>
<li>二级菜单2li>
<li>二级菜单3li>
<li>二级菜单4li>
<li>二级菜单5li>
ul>
li>
<li>
<span>一级菜单1span>
<ul class="secondNav">
<li>二级菜单1li>
<li>二级菜单2li>
<li>二级菜单3li>
<li>二级菜单4li>
<li>二级菜单5li>
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 中 == 与 === 的区别
== 叫做相等运算符，只要值相等即可为真。
=== 叫做严格运算符，不仅要求值相等，类型也要求相等。
案例：显示隐藏更多
<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() 具体用法
案例代码
<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>
运行效果：
点击一级菜单，会产生二级菜单的下拉列表。
