如何使用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

使用.toggleClass("active")并检查以下代码段。

 $(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 2

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

单击按钮时，这会切换类： https : //jsfiddle.net/mqhyLohe/

Answer 3

尝试查看JavaScript classList.toggle（）（与IE9及更低版本不兼容）。 否则，请看一下jQuery UI（如果jQuery是您要漫游的路径）。

Answer 4

检查是否有效

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

Answer 5

你必须给你的清单一个ID

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

Answer 6

我也曾经遇到过同样的问题。 使用图标解决了。 请在这里参考答案

这是我以前使用的：

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