Thêm lớp 'hoạt động' để mở Bootstrap accordion mục

Question

Tôi đã thử giải pháp này:

Twitter bootstrap: adding a class to the open accordion title

Nhưng vô ích, ai đó có thể cho tôi biết những gì tôi đang làm sai?

Đây là accordion:

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

Và sau đó JS của tôi ở phía dưới:

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

Tôi thực sự không biết nhiều JS, vì vậy bất kỳ sự giúp đỡ được đánh giá cao!

Answer 1

Nếu bạn nhìn thấy trong fiddle đó, ông đã xác định một quy tắc css cho

.active { 
    background-color: Blue; 
} 

Trong trường hợp của bạn, bạn đang áp dụng thành công các lớp css để nguyên tố này, nhưng lớp không được định nghĩa. (Hoặc bạn chưa đăng nó trong câu hỏi)

Answer 2

này làm việc cho tôi:

$('.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') 
    } 
)