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

辉煌的猫薄荷

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

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

这是我当前的代码：

  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，该属性仅覆盖先前的隐身值。看不见的阶级仍然存在。我该怎么做才能达到理想的效果？如果没有简单的方法来删除不可见的类，如何更新我的toggleAll使其再次正常工作？（它无法隐藏元素。即使它确实删除了invisible属性，但display：块仍然存在，并且不会被我的toggleAll删除）。

谢谢！

三宅义三

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

您的分配内容（.ovelseInnhold）应该以display:noneCSS开头。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。