積極的顏色使用jQuery

Question

請參閱代碼底部，是關於引導手風琴，因爲你可以看到代碼它顯示在標題節的一部分......

<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Manage</span><i class="accordion_icon fa fa-chevron-up"></i></dt> 

我想補充（圖標使用CSS。主動和jQuery ..

請參閱相同的代碼文本和背景顏色）...

 <dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt> 
    <dd class="accordion_content"> 
    <div class="list-group"> 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;Members</a> 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Posts</a> 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp;comments</a> 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;&nbsp;Privacy</a> 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-bell" aria-hidden="true"></i>&nbsp;&nbsp;Notifications</a> 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;Emails</a> 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;Sites Infor</a> 
</div> 
    </dd> 

在CSS

..

.active{ 
color:blue; 
background-color:red; 
} 

和jQuery的

jQuery('.accordion dt').click(function() { 
     jQuery(this).find('i').toggleClass('fa-chevron-up fa-chevron-down ').closest('dt').next() 
     .slideToggle().siblings('.accordion_content').slideUp(); 

    }); 

jQuery('.accordion_content').hide(); 

我的問題是，如何才能寫出addiation代碼，允許變更（圖標，文字和背景顏色），當人點擊標題名稱..

Answer 1

我承擔你所有的代碼都可以工作。從所有元素中刪除所有active類，並將其添加到單擊的元素。

jQuery('.accordion dt').click(function() { 
    jQuery(this).find('i').toggleClass('fa-chevron-up fa-chevron-down ').closest('dt').next() 
    .slideToggle().siblings('.accordion_content').slideUp(); 
    //changes starts here; 
    jQuery('.accordion dt').removeClass('active'); 
    jQuery(this).addClass('active'); 

}); 

$(function() { 
 
    $('dt').click(function() { 
 

 
    $(this).find('i').toggleClass('fa-chevron-up fa-chevron-down ').closest('dt').next() 
 
     .slideToggle().siblings('.accordion_content').slideUp(); 
 
    $('dt').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 

 
    $('.accordion_content').hide(); 
 
});

.active { 
 
    color: blue; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt> 
 
<dd class="accordion_content"> 
 
    <div class="list-group"> 
 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;Members</a> 
 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Posts</a> 
 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp;comments</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;&nbsp;Privacy</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-bell" aria-hidden="true"></i>&nbsp;&nbsp;Notifications</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;Emails</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;Sites Infor</a> 
 
    </div> 
 
</dd> 
 
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i>&nbsp;&nbsp;Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt> 
 
<dd class="accordion_content"> 
 
    <div class="list-group"> 
 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;&nbsp;Members</a> 
 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Posts</a> 
 
    <a href="#" class="list-group-item list-group-item-action"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;&nbsp;comments</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;&nbsp;Privacy</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-bell" aria-hidden="true"></i>&nbsp;&nbsp;Notifications</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-envelope" aria-hidden="true"></i>&nbsp;&nbsp;Emails</a> 
 
    <a href="#" class="list-group-item list-group-item-action "><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;&nbsp;Sites Infor</a> 
 
    </div> 
 
</dd>