активного цвета с помощью 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 .active и 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>