Как переключить класс между двумя элементами с помощью jquery?

Question

У меня есть списки согласных с одним списком, открытым всегда. Как я могу переключать активный класс при нажатии кнопки?

<ul class="accordion one-open"> 
    <li class="active"> 
     <div class="title">Title 1</div> 
     <div class="content">Content 1</div> 
    </li> 
    <li> 
     <div class="title">Title 2</div> 
     <div class="content">Content 2</div> 
    </li> 
</ul> 
<button>Toggle the content </button> 

Answer 1

Попробуйте изучить класс JavaScriptList.toggle() (несовместимый с IE9 и ниже). В противном случае взгляните на jQuery UI (если jQuery - это путь, по которому вы хотите побродить).

Answer 2

Проверьте, работает ли он

$(".accordion li").click(function(){ 
    $("li").removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

вы должны дать свой список идентификатор

$("#item1").click(function(){ 
    $(".active").removeClass("active"); 
    $(this).addClass("active") 
}); 

Answer 4

Используйте .toggleClass("active") из JQuery и проверьте ниже фрагмент кода.

$(document).ready(function(){ 
 
    $("#toggel_class").on('click',function(){ 
 
    $("ul li").toggleClass("active"); 
 
    }); 
 
});

.active { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="accordion one-open"> 
 
    <li class="active"> 
 
     <div class="title">Title 1</div> 
 
     <div class="content">Content 1</div> 
 
    </li> 
 
    <li> 
 
     <div class="title">Title 2</div> 
 
     <div class="content">Content 2</div> 
 
    </li> 
 
</ul> 
 
<button id="toggel_class">Toggle the content </button>

Answer 5

$("button").on("click", function() { 
    $("li").toggleClass("active"); 
}); 

Это переключает класс, когда нажата кнопка: https://jsfiddle.net/mqhyLohe/

Answer 6

я тоже сталкивался с той же проблемой. Решил его с помощью значков. Пожалуйста, обратитесь ответ here

Это то, что я использовал раньше:

if($(this).text() == "-") 
{ 
    $(this).text("+"); 
    } 
    else { 
    $('#accordion .opener').text("+"); 
    $(this).text("-"); 
    } 
});