记录一下：jquery常用的手风琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/static/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.items {
display: flex;
border: 1px solid #eee;
width: 200px;
justify-content: space-between;
}
</style>
<body>
<div id="select">
<div class="selectClick">
<div class="items">
<div>1111</div>
<div class="btn">展开</div>
</div>
<div class="isshow">
1111隐藏内容
</div>
</div>
<div class="selectClick">
<div class="items">
<div>2222</div>
<div class="btn">展开</div>
</div>
<div class="isshow">
2222隐藏内容
</div>
</div>
<div class="selectClick">
<div class="items">
<div>3333</div>
<div class="btn">展开</div>
</div>
<div class="isshow">
3333 隐藏内容
</div>
</div>
</div>
</body>
</html>
<script>
// 上来先隐藏所有
$("#select .isshow").hide()
$('#select .selectClick').click(function () {
//获取当前点击tab的id
var index = $(this).index();
//点击某一项判断是否被打开
if ($("#select .isshow:eq(" + index + ")").is(":visible") == false) {
$("#select .btn:eq(" + index + ")").html('关闭')
$("#select .isshow:eq(" + index + ")").show()
$('#select .isshow').each(function (ind) {
if (ind != index) {
$("#select .isshow:eq(" + ind + ")").hide()
$("#select .btn:eq(" + ind + ")").html('展开')
}
})
} else {
$("#select .isshow:eq(" + index + ")").hide()
$("#select .btn:eq(" + index + ")").html('展开')
}
})
</script>