更改引导面板的图标

Question

我在 PHP 中制作了一个常见问题解答脚本我想在打开面板和关闭面板时更改图标。我尝试了这些代码但没有成功。那么我的代码中的错误是什么？

<div class="col-md-9 col-lg-9 col-sm-12 ">  
                        <?php  $v1 = ''; foreach($var as $data){ ?>

                            <div class="faqHeader" id="<?php echo  str_replace(' ','',$data['name']);?>"> <?php echo $data['name'];?> </div>                

                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <?php   foreach($data['data'] as $dat){ ?> 
                                    <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="headingOne">
                                            <h4 class="panel-title">
                                                <a role="button" data-toggle="collapse"  href="#col<?php
                                                echo $v1;?>" aria-expanded="true" aria-controls="col<?php
                                                echo $v1;?>">
                                                    <span class="glyphicon glyphicon-minus pull-right"></span>
                                                    <?php echo $dat['questions'];?>
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="col<?php echo $v1;?>" class="panel-collapse collapse"  role="tabpanel" aria-labelledby="headingOne">
                                            <div class="panel-body">
                                                <?php echo $dat['answer'];?>
                                            </div>
                                        </div>
                                    </div>
                               <?php $v1=$v1+1; } ?>
                            </div>
                        <?php } ?>  
                </div>


<script>
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

</script>

请帮帮我？

Answer 1

试试这个

css solution

.panel-heading [data-toggle="collapse"].collapsed:after{
    content: "+";
    float: right;
}
.panel-heading [data-toggle="collapse"]:after {
    content: "-";
    float: right;
}

.panel-heading [data-toggle="collapse"].collapsed:after{
    content: "+";
    float: right;
}
.panel-heading [data-toggle="collapse"]:after {
    content: "-";
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
	<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="#aaa">
						aaa
					</a>
				</h4>
			</div>
			<div id="aaa" class="panel-collapse collapse in">
				<div class="panel-body">
					aaa<br>
					aaa
				</div>
			</div>
		</div> <!-- .panel -->

		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#bbb">
						bbb
					</a>
				</h4>
			</div>
			<div id="bbb" class="panel-collapse collapse">
				<div class="panel-body">
					bbb<br>
					bbb
				</div>
			</div>
		</div> 
	</div> 
</div>

---

Js solution

$("#accordion, #bs-collapse").on("show.bs.collapse",function(a){ 
    $(a.target).prev('.panel-heading').addClass('active'); 
});
$("#accordion, #bs-collapse").on('hide.bs.collapse',function(a){ 
    $(a.target).prev('.panel-heading').removeClass('active');
});

   $("#accordion, #bs-collapse").on("show.bs.collapse",function(a){ 
		$(a.target).prev('.panel-heading').addClass('active'); 
	});
   $("#accordion, #bs-collapse").on('hide.bs.collapse',function(a){ 
	   $(a.target).prev('.panel-heading').removeClass('active');
	});

.panel-heading a:after {
    content: "+";
    float: right;
}
.panel-heading.active a:after {
    content: "-";
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
	<div class="panel-group" id="accordion">
		<div class="panel panel-default">
			<div class="panel-heading active">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent="#accordion" href="#aaa">
						aaa
					</a>
				</h4>
			</div>
			<div id="aaa" class="panel-collapse collapse in">
				<div class="panel-body">
					aaa<br>
					aaa
				</div>
			</div>
		</div> <!-- .panel -->

		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#bbb">
						bbb
					</a>
				</h4>
			</div>
			<div id="bbb" class="panel-collapse collapse">
				<div class="panel-body">
					bbb<br>
					bbb
				</div>
			</div>
		</div> 
	</div> 
</div>