2017-08-12 76 views
0

我在PHP中製作一個faq腳本我想在打開面板並關閉面板時更改圖標。我嘗試了這些代碼但未獲得成功。那麼,我的錯誤是什麼碼?更改引導面板的圖標

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

請幫幫我嗎?

回答

0

試試這個

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>