手风琴
这里以手风琴的例子来说明：
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手风琴</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.accordion{
width: 500px;
margin: 100px auto;
border: 1px solid #000;
}
.accordion ul{
list-style: none;
}
.accordion ul li.cur h3{
background-color: orange;
}
.accordion ul li h3{
line-height: 40px;
background-color: skyblue;
padding: 0 10px;
border-bottom: 1px solid #000;
color:white;
cursor: pointer;
position: relative;
}
.accordion ul li .content{
padding: 10px;
line-height: 150%;
font-size: 16px;
display: none;
}
.accordion ul li.first .content{
display: block;
}
.accordion ul li i{
position: absolute;
right: 10px;
top: 10px;
width: 16px;
height: 16px;
background-color: yellow;
background: url(images/icon.png);
/*css3的过渡*/
transition:all 1s ease 0s;
}
.accordion ul li.cur i{
/*有cur的时候转90度*/
transform:rotate(90deg);
}
</style>
</head>
<body>
<div class="accordion">
<ul>
<li class="cur first">
<h3>11111111<i></i></h3>
<div class="content">
<p>
111111111111111111111
</p>
</div>
</li>
<li>
<h3>222222222<i></i></h3>
<div class="content">
<p>
2222222222222222222222
</p>
</div>
</li>
<li>
<h3>3333333333<i></i></h3>
<div class="content">
<p>
333333333333333333333
</p>
</div>
</li>
<li>
<h3>44444444444<i></i></h3>
<div class="content">
<p>
4444444444444444444444444
</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="../../Jquery-01/lib/jquery-3.2.1.js"></script>
<script>
/*
思路：
1. 给 所有的 h3 绑定 点击事件处理函数
2. 函数中：
（1） 移除当前li所有兄弟 的cur 样式
$(this).parent().siblings()
（2）给当前li，添加 cur 样式
$(this).parent()
(3) 先让其他所有 .content 隐藏
$(".content").slideUp();
父节点 所有兄弟 儿子 带content样式 隐藏
$(this).parent().siblings().children(".content").slideUp()
(4) 让 当前h3的兄弟节点.content 显示
$(this).siblings().slideDown()
* */
$(".accordion h3").click(function(){
//方法3：
if($(this).siblings(".content").is(":visible")){
//移除样式
$(this).parent().removeClass();
//二次点击==>隐藏
$(this).siblings().slideUp();
console.log("二次点击")
return ;
}
// 当前点击的节点 的父元素 添加样式cur 当前节点 的所有兄弟 移除样式cur
$(this).parent().addClass("cur").siblings().removeClass("cur");
// 若用sibling()则报错
// $(this).siblings().slideDown().parent().siblings().slideUp();//这个效果很好玩，会隐藏（是隐藏不是收起）所有 li 只有点击还在页面上很好玩
// 当前点击的节点 的所有兄弟 显示 当前节点的父元素 的所有兄弟 类名为content的孩子 隐藏
$(this).siblings().slideDown().parent().siblings().children(".content").slideUp();
/* $(this).siblings().slideDown();
$(this).parent().siblings().children(".content").slideUp();//这两句等价上面一句*/
})
</script>
</body>
</html>
jQuery代码
<script type="text/javascript" src="../../Jquery-01/lib/jquery-3.2.1.js"></script>
<script>
$(".accordion h3").click(function(){
if($(this).siblings(".content").is(":visible")){
$(this).parent().removeClass();
$(this).siblings().slideUp();
return ;
}
$(this).parent().addClass("cur").siblings().removeClass("cur");
$(this).siblings().slideDown().parent().siblings().children(".content").slideUp();
})
</script>
方法介绍
手风琴即要实现，展开当前点击 li 的内容并收起其他 li ，在实现二次点击时收起当前 li 的效果时，首先要判断当前点击的 li 的状态（展开或者收起），所以也就是判断jQuery样式是否存在。
收起图
image.png
点击展开图
image.png
下面将介绍四种方法，可以根据需求或喜好自行选择。四种方法只有判断处代码不同，判断后执行的更改是一致的，毕竟实现的是同一效果嘛！
方法1：
.hasClass(“cur”) 是否有类名为cur 的样式
image.png
方法2：
.is(“.cur”) 是否有类名为 cur 的样式
image.png
方法3：
与方法2类似，都是用 is ()函数
is(“:visible”)可见 同理隐藏则is(":hidden") 返回值是true / false
（备注：该样式作用是显示时）
image.png
【插播小广告】==>前三种方法都是直接用 jQuery 的方法
方法4：
与前三种方法不同，这里是先用 .get() 方法，将jQuery转换为js 对象再判断样式 ( 父元素只有一个，当然下标是0 所以get(0) )
image.png
说明
以上四种方法，本人均一 一测试，并得到预期效果！
网友评论