2017-08-12 2 views
0

Ich mache ein FAQ-Skript in PHP Ich möchte das Symbol ändern, wenn ich das Panel zu öffnen und das Panel zu schließen. Ich habe diesen Code versucht, aber nicht erfolgreich.So ist der Fehler in meinem Code?ändern Sie das Symbol des bootstrap panel

<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> 

Bitte helfen Sie mir?

Antwort

0

Versuchen Sie, diese

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"> 
 
\t <div class="panel-group" id="accordion"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading"> 
 
\t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#aaa"> 
 
\t \t \t \t \t \t aaa 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="aaa" class="panel-collapse collapse in"> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t aaa<br> 
 
\t \t \t \t \t aaa 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> <!-- .panel --> 
 

 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading"> 
 
\t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#bbb"> 
 
\t \t \t \t \t \t bbb 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="bbb" class="panel-collapse collapse"> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t bbb<br> 
 
\t \t \t \t \t bbb 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </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){ 
 
\t \t $(a.target).prev('.panel-heading').addClass('active'); 
 
\t }); 
 
    $("#accordion, #bs-collapse").on('hide.bs.collapse',function(a){ 
 
\t $(a.target).prev('.panel-heading').removeClass('active'); 
 
\t });
.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"> 
 
\t <div class="panel-group" id="accordion"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading active"> 
 
\t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" href="#aaa"> 
 
\t \t \t \t \t \t aaa 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="aaa" class="panel-collapse collapse in"> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t aaa<br> 
 
\t \t \t \t \t aaa 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> <!-- .panel --> 
 

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

Verwandte Themen