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

使用jquery的.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

我也面临同样的问题。用图标解决了它。请参阅答案here

这是我以前用过的：

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

如何使用jquery在两个元素之间切换类？

6 个答案: