我目前正在使用Bootstrap中的可折叠内容。所以当我点击collapsible-header的背景时，这就是实际的可视化。
正如您所注意到的，当我点击可折叠标题背景时，图标没有改变。列表已折叠但我希望通过之后按下背景来更改图标。
但是，如果我点击图标本身没有问题，我会将图标更改为加号，内容也会折叠。
但是我想让我的可折叠标题背景与图标一起响应。请帮忙。这是示例代码，但我无法进行适当的可视化，我很抱歉给您带来不便。
<div class="col-md-12" style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<span class="pull-left"><h3>Categories</h3></span>
<span class="pull-right">
<a href="#catehide1" class="catehide2" id="catehide1"><i class="zmdi zmdi-plus"></i></a>
<a href="#cateshow1" class="cateshow2" id="cateshow1"><i class="zmdi zmdi-minus"></i></a>
</span>
</div>
<div class="collapsible-body">
<ul class="collapsible-list">
<li> <a href="www.sample1.com"> Sample 1 </a> </li>
<li> <a href="www.sample1.com"> Sample 2 </a> </li>
<li> <a href="www.sample1.com"> Sample 3</a> </li>
<li> <a href="www.sample1.com"> Sample 4</a> </li>
<li> <a href="www.sample1.com"> Sample 5</a> </li>
<li> <a href="www.sample1.com"> Sample 6 </a> </li>
<li> <a href="www.sample1.com">Sample 7</a> </li>
<li> <a href="www.sample1.com">Sample 8 </a> </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>/
继承人的css部分
.catehide2, .cateshow2 {
float: right;
font-size: 20px;
color: #000000;
text-align: center;
padding:0;
}
.catehide2:hover, .cateshow2:hover {
color: #9e9e9e;
text-decoration: none;
opacity: 1;
}
.categorybox1 ul{
list-style-type:none;
margin:0;
padding:0;
display:none;
height:auto;
font-family: 'Roboto', sans-serif;
font-weight:450;
font-size:15px;
color:#424242;
border:0;
}
.categorybox1 ul li{
float: left;
width: 25%;
padding: 0 0 15px 40px;
}
.categorybox1 ul li a:link, .categorybox1 ul li a:visited {
color:#424242;
text-decoration: none;
}
.categorybox1 ul li a:hover, .categorybox1 ul li a:active {
color:#9e9e9e;
text-decoration: none;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-landing .collapsible-header {
display: block;
cursor: pointer;
height: 60px;
line-height: 60px;
padding: 0 24px;
background-color: #fff;
border-bottom: none;
}
.collapsible-landing .collapsible-header h3 {
font-size: 16px;
font-weight: 500;
padding:0;margin: 0;
line-height: 60px;
}
.collapsible-landing .collapsible-header i {
width: auto;
font-size: 1.6rem;
line-height: 60px;
display: block;
float: left;
text-align: center;
margin-right: 0;
}
.collapsible-landing .collapsible-body {
background: #ffffff;
display: none;
border-bottom: none;
box-sizing: border-box;
}
.collapsible-list li a {
width:25%;
padding:10px 24px;
float:left;
color:#424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color:#9e9e9e;
}
.collapsible-list li.clearfix {
clear:both;
padding: 0 0 20px 0;
}
答案 0 :(得分：0)
你有很多css，而一个小的jquery函数只是轻松解决你的问题。 希望它会对你有所帮助！
$(function(){
$('#collapse1').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-down"></span> Show');
})
$('#collapse1').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-chevron-up"></span> Hide');
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Collapsible Panel</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="button" data-toggle="collapse" data-target="#collapse1">
<span class="glyphicon glyphicon-chevron-down"></span> show
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
<强>已更新
纯CSS方式
手风琴扩展和折叠时图标更改的问题已得到解决。
检查 CODEPEN
上的示例代码HTML：
<div class="col-md-12 " style="margin:20px 0 0 0">
<ul class="collapsible collapsible-landing">
<li>
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#test">
<h3 class="panel-title accordion-toggle">Categories</h3>
</div>
<div class="collapsible-body collapsible-body panel-collapse collapse" id="test">
<ul class="collapsible-list">
<li> <a href="www.sample1.com"> Sample 1 </a> </li>
<li> <a href="www.sample1.com"> Sample 2 </a> </li>
<li> <a href="www.sample1.com"> Sample 3</a> </li>
<li> <a href="www.sample1.com"> Sample 4</a> </li>
<li> <a href="www.sample1.com"> Sample 5</a> </li>
<li> <a href="www.sample1.com"> Sample 6 </a> </li>
<li> <a href="www.sample1.com">Sample 7</a> </li>
<li> <a href="www.sample1.com">Sample 8 </a> </li>
<li class="clearfix"></li>
</ul>
</div>
</li>
</ul>
</div>
CSS：
ul {
list-style: none;
margin: 0;
padding: 0;
height: auto;
font-family: 'Roboto', sans-serif;
font-weight: 450;
font-size: 15px;
color: #424242;
border: 0;
}
.collapsible-landing {
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
margin: 0.5rem 0 1rem 0;
box-shadow: none;
}
.collapsible-list {
background: #efefef;
}
.collapsible-list li a {
width: 25%;
padding: 10px 24px;
float: left;
color: #424242;
}
.collapsible-list li a:hover {
text-decoration: none;
border-bottom: none;
color: #9e9e9e;
}
.collapsible-list li.clearfix {
clear: both;
padding: 0 0 20px 0;
}
.accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Material-Design-Iconic-Font';
content: "\f273";
float: right;
color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
/* symbol for "collapsed" panels */
content: "\f278";
}