效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width: 75px;
height: 27px;
line-height: 30px;
border-radius: 5px;
overflow: hidden;
position: relative;
background: #82e497;
box-shadow: #82e497 0px 0px 0px 2px;
color: #fff;
font-size: 13px;
margin:30px;
}
.div1 .left{
position: absolute;
left:4px;
}
.div1 .right{
position: absolute;
right:4px;
}
.div2{
width: 40px;
height: 27px;
border-radius: 14%;
background: #fff;
position: absolute;
}
.open1{
background: #f7ca99;
box-shadow: #f7ca99 0px 0px 0px 2px;
text-align: left;
}
.open2{
top: 0;
right: 0;
}
.close1{
background: #82e497;
box-shadow: #82e497 0px 0px 0px 2px;
border-left: transparent;
text-align: right;
}
.close2{
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="div1 open1">
<span class="left">隐藏</span>
<span class="right">显示</span>
<div class="div2 open2"></div>
</div>
<div class="div1 open1">
<span class="left">隐藏</span>
<span class="right">显示</span>
<div class="div2 open2"></div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(".div2").on('click',function(){
$(this).parent().toggleClass('close1');
$(this).parent().toggleClass('open1');
$(this).toggleClass('close2');
$(this).toggleClass('open2');
})
</script>
</body>
</html>
1946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
