向上/向下箭头添加到Bootstrap手风琴

Question

我有一个Bootstrap手风琴&我想向它添加状态箭头。

所以箭头在折叠时会朝下，在展开时朝上。

我当前的代码是在这里（包括演示）：https://jsfiddle.net/m1xj0avo/

非常感谢任何指导。

$(function() { 
 

 
    var active = true; 
 

 
    $('#collapse-init').click(function() { 
 
     if (active) { 
 
      active = false; 
 
      $('.panel-collapse').collapse('show'); 
 
      $('.panel-title').attr('data-toggle', ''); 
 
      $(this).text('Enable accordion behavior'); 
 
     } else { 
 
      active = true; 
 
      $('.panel-collapse').collapse('hide'); 
 
      $('.panel-title').attr('data-toggle', 'collapse'); 
 
      $(this).text('Disable accordion behavior'); 
 
     } 
 
    }); 
 
    
 
    $('#accordion').on('show.bs.collapse', function() { 
 
     if (active) $('#accordion .in').collapse('hide'); 
 
    }); 
 

 
});

.panel-title:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button id="collapse-init" class="btn btn-primary"> 
 
    Disable accordion behavior 
 
</button> 
 
<br/><br/> 
 

 
<div class="panel-group" id="accordion"> 
 
    <!-- First Panel --> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title" 
 
       data-toggle="collapse" 
 
       data-target="#collapseOne"> 
 
       Collapsible Group Item #1 
 
      </h4> 
 
     </div> 
 
     <div id="collapseOne" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Anim pariatur cliche reprehenderit, 
 
       enim eiusmod high life accusamus terry richardson ad squid. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- Second Panel --> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title" 
 
       data-toggle="collapse" 
 
       data-target="#collapseTwo"> 
 
       Collapsible Group Item #2 
 
      </h4> 
 
     </div> 
 
     <div id="collapseTwo" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Anim pariatur cliche reprehenderit, 
 
       enim eiusmod high life accusamus terry richardson ad squid. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- Third Panel --> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title" 
 
       data-toggle="collapse" 
 
       data-target="#collapseThree"> 
 
       Collapsible Group Item #3 
 
      </h4> 
 
     </div> 
 
     <div id="collapseThree" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Anim pariatur cliche reprehenderit, 
 
       enim eiusmod high life accusamus terry richardson ad squid. 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
    
 
    
 
    
 
    
 
    
 
<!-- Post Info --> 
 
<div style='position:fixed;bottom:0;left:0;  
 
      background:lightgray;width:100%;'>For this SO Question: <a href='http://stackoverflow.com/q/20347553/1366033'>Keep Accordions Open</a> 
 

 
    <br/>Find documentation: <a href='http://getbootstrap.com/javascript/#collapse-usage'>Bootstrap Collapse Usage</a> 
 

 
    <br/>Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a> 
 

 
    <br/> 
 
    <div>

Answer 1

只有CSS的解决方案，利用一些引导的手风琴已经到位的触发器。例如，扩展的.panel-title的值为[area-expanded="true"]，我们可以将其用作CSS选择器。

考虑到这一点，你可以使用这样的代码：

.panel-title { 
 
    position: relative; 
 
} 
 
    
 
.panel-title::after { 
 
\t content: "\f107"; 
 
\t color: #333; 
 
\t top: -2px; 
 
\t right: 0px; 
 
\t position: absolute; 
 
    font-family: "FontAwesome" 
 
} 
 

 
.panel-title[aria-expanded="true"]::after { 
 
\t content: "\f106"; 
 
}

<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.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="panel-group" id="accordion"> 
 
    <!-- First Panel --> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne"> 
 
       Collapsible Group Item #1 
 
      </h4> 
 
     </div> 
 
     <div id="collapseOne" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Anim pariatur cliche reprehenderit, 
 
       enim eiusmod high life accusamus terry richardson ad squid. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- Second Panel --> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo"> 
 
       Collapsible Group Item #2 
 
      </h4> 
 
     </div> 
 
     <div id="collapseTwo" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Anim pariatur cliche reprehenderit, 
 
       enim eiusmod high life accusamus terry richardson ad squid. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- Third Panel --> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree"> 
 
       Collapsible Group Item #3 
 
      </h4> 
 
     </div> 
 
     <div id="collapseThree" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Anim pariatur cliche reprehenderit, 
 
       enim eiusmod high life accusamus terry richardson ad squid. 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

插入记号使用字体真棒和:after伪选择器。