矢印付きブートストラップアコーディオン

Question

ブートストラップアコーディオンについて簡単な質問があります。

私はアコーディオンの魔女を作成するためにヘッダーをクリックして展開できます。これはうまくいきますが、私の問題は、矢印がヘッダーに表示されていないことです。

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> 
      <h4 class="panel-title">Test1</h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p>sadfsadfsdaf sadf</p> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo"> 
      <h4 class="panel-title">Test2</h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p>Bla bla bla</p> 
      </div> 
     </div> 
    </div> 
    </div> 

CSS：ここ

.panel-heading [data-toggle="collapse"]:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e072"; /* "play" icon */ 
    float: right; 
    color: #b0c5d8; 
    font-size: 18px; 
    line-height: 22px; 

    /* rotate "play" icon from > (right arrow) to down arrow */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform:  rotate(-90deg); 
    -o-transform:  rotate(-90deg); 
    transform:   rotate(-90deg); 
} 
.panel-heading [data-toggle="collapse"].collapsed:after { 
    /* rotate "play" icon from > (right arrow) to^(up arrow) */ 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform:  rotate(90deg); 
    -o-transform:  rotate(90deg); 
    transform:   rotate(90deg); 
} 

JSFiddle

Answer 1

問題は、セレクタの間の空間になっている。

.panel-heading [data-toggle="collapse"]:after 
       ^------- // remove this space to make this selector work 

は今、あなたはdata-toggle属性これを持つすべての要素を選択していますdエスカーダントは.panel-headingです。それは次のようになります。

.panel-heading[data-toggle="collapse"]:after 

.panel-heading { 
 
    position: relative; 
 
} 
 
.panel-heading[data-toggle="collapse"]:after { 
 
    font-family: 'Glyphicons Halflings'; 
 
    content: "\e072"; /* "play" icon */ 
 
    position: absolute; 
 
    color: #b0c5d8; 
 
    font-size: 18px; 
 
    line-height: 22px; 
 
    right: 20px; 
 
    top: calc(50% - 10px); 
 

 
    /* rotate "play" icon from > (right arrow) to down arrow */ 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform:  rotate(-90deg); 
 
    -o-transform:  rotate(-90deg); 
 
    transform:   rotate(-90deg); 
 
} 
 
.panel-heading[data-toggle="collapse"].collapsed:after { 
 
    /* rotate "play" icon from > (right arrow) to^(up arrow) */ 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform:  rotate(90deg); 
 
    -o-transform:  rotate(90deg); 
 
    transform:   rotate(90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Accordion START --> 
 
     <div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> 
 
      <h4 class="panel-title">Test1</h4> 
 

 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>sadfsadfsdaf sadf</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo"> 
 
      <h4 class="panel-title">Test2</h4> 
 

 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
<p> 
 
Bla bla bla 
 
</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- Accordion END -->