私は、このソリューション試してみましたブートストラップアコーディオン項目

Question

開くための「アクティブ」クラスの追加：

Twitter bootstrap: adding a class to the open accordion title

しかし無駄にし、誰かが私が間違ってやっているものを私に伝えることができますか？

これはアコーディオンです：

<div class="accordion" id="accordion"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <div class="row-fluid"> 
       <div class="span5"> 
        <img src="img/smartlist/user-icon.png" class="user"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" 
        href="#collapseOne">Austin Wang</a> 

       </div> 
       <div class="span7"> 
        <img class="envelope" src="img/smartlist/envelope.png"> <a href="#">Seller Drip</a> 

        <img class="new" src="img/smartlist/new-icon.png"> <a href="#">New</a> 

        <img class="messages" src="img/smartlist/bubbles.png"> <a href="#">8 Days</a> 

        <img class="accordion-action pull-right" src="img/smartlist/plus-box.png" 
        data-toggle="collapse" data-target="#collapseOne"> 
       </div> 
      </div> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       <div class="row-fluid"> 
        <div class="span12 top-links"> <a href="#" class="active">Email Template</a> 
<a href="#">Home Price Evaluation Offer</a> 

        </div> 
       </div> 
       <div class="arrow-up"></div> 
       <div class="row-fluid grey-body"> 
        <div class="span12"> 
         <label>Subject</label> 
         <input type="text" class="text-field"> 
         <label>Body</label> 
         <textarea rows="10"></textarea> 
         <div class="buttons"> 
          <div class="form"> 
           <button type="submit" class="send-button">Send</button> <a href="#" class="call">Call</a> 
<a href="#" class="skip">Skip</a> 

          </div> 
          <div class="pull-right radio"> 
           <input type="radio"> 
           <label>BCC Me</label> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

そして一番下に私のJS：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/less-1.3.3.min.js" type="text/javascript"></script> 
<script src="js/bootstrap.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(".collapse").collapse() 
</script> 
<script type="text/javascript"> 
$(function() { 

$('.accordion-body').on('show', function (e) { 
    $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active'); 
}); 

$('.accordion-body').on('hide', function (e) { 
    $(this).find('.accordion-toggle').not($(e.target)).removeClass('active'); 
}); 

}); 
</script> 

私は本当に多くのJSを知らないので、任意の助けを歓迎です！

Answer 1

あなたがそのフィドルに表示された場合、彼はあなたのケースで

.active { 
    background-color: Blue; 
} 

のための1つのCSSルールを定義している、あなたは成功した要素にCSSクラスを適用しているが、クラスが定義されていません。

Answer 2

を（またはあなたが質問でそれを投稿していない）これは私の作品：

$('.accordion-body').on('show', 
    function(e){ 
    $(e.currentTarget).parent().find('.accordion-heading').addClass('active') 
    } 
) 

$('.accordion-body').on('hide', 
    function(e){ 
    $(e.currentTarget).parent().find('.accordion-heading').removeClass('active') 
    } 
)