<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap折叠、手风琴</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
a:link{text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
body{background:#2d2c41;}
.main-menu{width:200px;text-align:center;margin:0 auto;margin-top:50px;}
</style>
</head>
<body >
<div class="main-menu">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
第 1 部分
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
第 2 部分
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>2</p>
<p>2</p>
<p>2</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
第 3 部分
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>3</p>
<p>3</p>
<p>3</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
第 4 部分
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>4</p>
<p>4</p>
<p>4</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('.panel-title a').on('click',function(){
//alert(0);
$(this).parents('.panel-default').siblings('.panel-default').find('i').replaceWith("<i class='glyphicon glyphicon-chevron-right' ></i>");
x=$('i').hasClass('glyphicon glyphicon-chevron-down');
$(this).find('i').replaceWith("<i class='glyphicon glyphicon-chevron-down' ></i>");
if(x){
$(this).find('i').replaceWith("<i class='glyphicon glyphicon-chevron-right' ></i>");
}
else{
$(this).find('i').replaceWith("<i class='glyphicon glyphicon-chevron-down' ></i>");
}
})
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
