bootstrap 手风琴（jq添加icon）

来源：互联网发布：2017双11淘宝交易额编辑：程序博客网时间：2024/05/22 18:22
<!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>
阅读全文
0 0
bootstrap 手风琴 （jq添加icon）

bootstrap 手风琴（jq添加icon）
