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

How to toggle class between two element using jquery?

本文关键字：元素 两个 之间 jquery 何使用      更新时间：2023-09-26

我有相应的列表，其中一个列表总是打开的。单击按钮时如何切换活动类？

<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>

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

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

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

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

检查是否工作

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

你必须给你的列表一个id

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

我也遇到过同样的问题。使用图标解决了问题。请参考此处的答案

这是我以前用过的：

if($(this).text() == "-")  
{
  $(this).text("+");
  }
  else {
  $('#accordion .opener').text("+");
  $(this).text("-");
   }
 });
相关文章：