14jquery实现的折叠选项卡
2019-03-11 本文已影响0人
An的杂货铺
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 200px;
border: 1px solid #000;
background: skyblue;
margin-bottom: 20px;
overflow: hidden;
}
.tab .box h2{
padding-left: 10px;
font-size: 20px;
font-weight: bold;
line-height: 30px;
margin-bottom: 5px;
cursor: pointer;
}
.tab .box h2 span{
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #000;
margin-right: 10px;
line-height: 20px;
text-align: center;
}
.tab .box .detail{
padding-left: 30px;
font-size: 14px;
line-height: 28px;
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="box">
<h2><span>+</span>男装</h2>
<div class="detail">
<p>短裤</p>
<p>牛仔裤</p>
<p>T恤衫</p>
</div>
</div>
<div class="box">
<h2><span>+</span>女装</h2>
<div class="detail">
<p>连衣裙</p>
<p>破洞牛仔裤</p>
<p>防晒衣</p>
</div>
</div>
<div class="box">
<h2><span>+</span>童装</h2>
<div class="detail">
<p>短裤</p>
<p>半身裙</p>
<p>T恤衫</p>
</div>
</div>
</div>
<div class="tab">
<div class="box">
<h2><span>+</span>男装</h2>
<div class="detail">
<p>短裤</p>
<p>牛仔裤</p>
<p>T恤衫</p>
</div>
</div>
<div class="box">
<h2><span>+</span>女装</h2>
<div class="detail">
<p>连衣裙</p>
<p>破洞牛仔裤</p>
<p>防晒衣</p>
</div>
</div>
<div class="box">
<h2><span>+</span>童装</h2>
<div class="detail">
<p>短裤</p>
<p>半身裙</p>
<p>T恤衫</p>
</div>
</div>
</div>
<div class="tab">
<div class="box">
<h2><span>+</span>男装</h2>
<div class="detail">
<p>短裤</p>
<p>牛仔裤</p>
<p>T恤衫</p>
</div>
</div>
<div class="box">
<h2><span>+</span>女装</h2>
<div class="detail">
<p>连衣裙</p>
<p>破洞牛仔裤</p>
<p>防晒衣</p>
</div>
</div>
<div class="box">
<h2><span>+</span>童装</h2>
<div class="detail">
<p>短裤</p>
<p>半身裙</p>
<p>T恤衫</p>
</div>
</div>
</div>
<script src="./jquery-1.12.1.min.js"></script>
<script>
$('.box h2').click(function(){
var ospan = $(this).children('span');
ospan.html(ospan.html() === '+'?'-':'+');
$(this).parent().siblings().children().find('span').html('+');
$(this).siblings().slideToggle(600).parent().siblings().children('div').slideUp(600)
//$(this).siblings().toggle(600).parent().siblings().children('div').hide(600) 也可以
})
</script>
</body>
</html>
如下图
image.png
