Question

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

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

Answer 1

以下内容应该有效：

$(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调用。

修改后添加：

你是否想要实现这样的目标？

$(document).ready(function() {
  $(".ac-content").hide();
  
  $('.ac-header').on("click", function (e) {
    $('.ac-header').not(this)
                   .removeClass("active")
                   .next(".ac-content")
                   .hide();
    
    $(this).toggleClass("active")
           .next(".ac-content")
           .toggle($(this).is(".active"));
  });
});

header { cursor: pointer; }
.active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

如果我正确理解了您的问题，您只需使用以下代码即可完全避免使用toggleClass。

$(function(){
     $('#faqs-list li').click(function() {
         //Removes the active class from any <li> elements

         if($(this).hasClass('active')){
             $(this).removeClass('active');
         } else {
             $(this).addClass('active');
         }
     });
});

Answer 3

你的代码中有太多的美元符号让我头脑旋转;你呢？

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

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]);

要实现隐藏/显示行为，请相应地定义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($('#foo .bar'));
swap_active($('#bar .foo'));  // class on previous elements automatically removed

根据jQuery暴露对你大脑的影响程度，你当然会想把它变成一个jQuery插件，所以你可以使用超酷的链接语法：

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

在任何情况下，完成所有这一切的目的是干净地将应用程序中发生的所有其他内容与基本概念分开，即基本概念是当前已分配给定类的一组元素，然后您可以指定另一组元素，在从前面的元素中删除类之后，将这些元素设置为给定的类。

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

3 个答案: