Javascript 从li中切换活动类，同时从任何其他li元素中删除活动类

使用手风琴进行常见问题解答并解决问题以获得所需的结果。单击.ac标题时尝试显示/隐藏.ac内容。还希望切换.ac标头的活动类，以便在.ac标头处于活动状态时更改背景色

$(function() {
    $('.ac-header').click(function (e) {
    if ($(this).hasClass('active')) {            
        $(this).next('.ac-content').hide();
    } else {
        $('.ac-content').not(this).each(function () {
        $(this).hide();
    });
    $(this).next('.ac-content').show();            
    }
    $(this).toggleClass('active');
    });          
    $('#faqs-list li').click(function() {
    $('#faqs-list li.active').not(this).removeClass('active');
    $(this).toggleClass('active');
    });
});    


<ul id="faqs-list" class="fd-accordion">
 <li>
  <header class="ac-header">
   <h4>1. What are the benefits of purchasing a plan?</h4>
   <span class="arrow"></span>
  </header>
  <div class="ac-content">
   <p>Insert Answer</p>
  </div>
 </li>
 <li>
  <header class="ac-header">
   <h4>2. What is covered under the plan?</h4>
   <span class="arrow"></span>
  </header>
   <div class="ac-content">
    <p>Insert Answer</p>
   </div>
  </li>
</ul>

$（函数（）{
$（'.ac标头'）。单击（函数（e）{
if（$（this.hasClass（'active'））{
$（this.next（'.ac content'）.hide（）；
}否则{
$（'.ac content'）。不是（此）。每个（函数（）{
$（this.hide（）；
});
$（this.next（'.ac content'）.show（）；
}
$（this.toggleClass（'active'）；
});          
$（“#常见问题列表li”）。单击（函数（）{
$（“#常见问题列表li.active”）.not（this.removeClass（'active'）；
$（this.toggleClass（'active'）；
});
});    


1.购买计划的好处是什么？
插入答案



2.该计划包括哪些内容？
插入答案

以下各项应起作用：

$(function() {
   $('#faqs-list li').on("click", function() {
       var isActive = $(this).is('.active');
       $('#faqs-list li.active').removeClass('active');
       $(this).toggleClass('active', !isActive);
   });  
});

因此，我们应该：

$(function() {
   $('#faqs-list li').on("click", function() {
       $('#faqs-list li.active').not(this).removeClass('active');
       $(this).toggleClass('active');
   });  
});

挑一个你最喜欢的。问题在于您在当前元素上调用

removeClass

，它会干扰

toggleClass

调用

---

编辑后添加：

你是不是想达到这样的目标？

$（文档）.ready（函数（）{
$（“.ac content”）.hide（）；
$（'.ac header'）。在（“单击”上，函数（e）{
$（'.ac标头'）。不是（此）
.removeClass（“活动”）
.next（“.ac内容”）
.hide（）；
$（this.toggleClass（“活动”）
.next（“.ac内容”）
.toggle（$（this）.is（“.active”）；
});
});
header{cursor:pointer；}
.active{颜色：红色；}



1.购买计划的好处是什么？
插入答案



2.该计划包括哪些内容？
插入答案


如果我正确理解您的问题，只需使用以下代码，您就可以避免同时使用
切换类

$（函数（）{
$（“#常见问题列表li”）。单击（函数（）{
//从任何
元素中删除活动类
if（$（this）.hasClass（'active'））{
$（this.removeClass（'active'）；
}否则{
$（this.addClass（'active'）；
}
});
});
你的代码中有太多的美元符号，我都快晕头转向了；你的呢

创建一个记住当前高亮显示元素的函数，以便下次可以撤消该函数：

function make_swapper(classname) {
    var current;
    return function(elts) {
        (current || []).forEach(function(e) { e.classList.remove(classname); };
        (elts    || []).forEach(function(e) { e.classList.add   (classname); };
        current = elts;
    };
}

swap_active = make_swapper("active");

现在，要在某些元素上设置类并将其从旧元素中删除，只需执行以下操作

swap_active([elt1, elt2]);
swap_active([elt3, elt4]);

swap_active($('#foo .bar'));
swap_active($('#bar .foo'));  // class on previous elements automatically removed

要实现隐藏/显示行为，请相应地定义
active
类

如果您坚持使用jQuery执行此操作，尽管我不明白这一点，但它看起来是这样的：

function make_swapper(classname) {
    var current = [];
    return function(elts) {
        current.removeClass(classname);
        elts.addClass(classname);
        current = elts;
    };
}
swap_active= make_swapper("active");

现在，要在某些元素上设置类并将其从旧元素中删除，只需执行以下操作

swap_active([elt1, elt2]);
swap_active([elt3, elt4]);

swap_active($('#foo .bar'));
swap_active($('#bar .foo'));  // class on previous elements automatically removed

根据jQuery暴露对您大脑的腐蚀程度，您当然希望将其制作成jQuery插件，因此您可以使用超酷的链接语法：

$('#foo .bar').swap_active()

在任何情况下，这样做的目的都是为了从应用程序中的所有其他内容中清晰地分离出一个基本概念，即有一组元素当前分配给给定的类，然后您可以指定另一组元素，将类从前面的元素中删除后，将其设置为给定的类。
您的第二个建议对切换类有效，但现在我发现手风琴存在其他一些不一致之处。有什么建议吗？我将编辑原始问题中的代码。@ljames我不确定是否理解您的编辑，但我已更新了答案