jquery - 我怎样才能让jQuery用fadeToggle切换一个类？

Question

我正在使用 fadeToggle() 在所选元素的可见性之间切换。当我的页面加载时，所有给定的元素都被赋予“不可见”类(这赋予它们 CSS 属性 display: none;)。

我希望能够切换此类名称，因为我用来切换所有元素的可见性/不可见性的另一个函数要求它能够找到具有不可见属性的元素。

这是我当前的代码:

  var sections = $('.ovelseSeksjon');
  var title = sections.find("h1")
  var assignments = sections.find(".ovelseInnhold");
  var plusMinus = sections.find(".fa");
  var toggleAll = $("#mainText").find(".toggleall");

  // Hide all assignments at page load
  assignments.addClass("invisible");

  // Toggle the invisible class when the title is clicked
  title.on('click', function() {
    // To capture the scope of this, it will be something else in setTimeout.
    $(this).parent().find(".invisible").fadeToggle("fast", "linear");
  });

  toggleAll.on("click", function() {
    console.log($(this).attr("class"));
    if($(this).hasClass("open")) {
      assignments.filter(".invisible").removeClass("invisible");
    }
    if($(this).hasClass("close")) {
      assignments.not(".invisible").addClass("invisible");
    }
  });

这行得通，但不是我希望的那样。这只是添加了一个新的 CSS 属性 display: block，它只会覆盖之前的不可见值。隐形类(Class)仍然存在。我该怎么做才能达到我想要的效果？如果没有简单的方法来删除不可见类，我该如何更新我的 toggleAll 以再次正常工作？ (它不能隐藏元素。即使它确实删除了 invisible 属性，display: block 仍然存在并且它没有被我的 toggleAll 删除)。

谢谢!

Answer 1

我不确定这是否是您的 HTML 的正确层次结构，但这里有一个示例。

您的作业内容 (.ovelseInnhold) 应以通过 CSS 设置的 display:none 开头。

var sections = $('.ovelseSeksjon');
  var title = sections.find("h1")
  var assignments = sections.find(".ovelseInnhold");
  var plusMinus = sections.find(".fa");
  var toggleAll = $("#mainText").find(".toggleall");


  // Toggle the invisible class when the title is clicked
  title.on('click', function() {
    // To capture the scope of this, it will be something else in setTimeout.
    $(this).parent().find(".ovelseInnhold").fadeToggle("fast", "linear");
  });

  toggleAll.on("click", function() {
    $('.ovelseInnhold').fadeToggle("fast", "linear");
  });

.ovelseInnhold { 
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mainText">
  <div class="toggleall">Toggle All</div>
</div>


<section class="ovelseSeksjon">
  <h1>Title 1</h1>
  <div class="ovelseInnhold">
    Assignments
  </div>
</section>


<section class="ovelseSeksjon">
  <h1>Title 2</h1>
  <div class="ovelseInnhold">
    Assignments
  </div>
</section>