Question

我正在使用fadeToggle()在所选元素的可见性之间切换。当我的页面被加载时，所有给定的元素都被赋予了类＆＃39;不可见的＆＃39; （它给了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，它只会覆盖以前的隐身值。隐形阶级仍然存在。我能做些什么来达到我想要的效果？如果没有简单的方法来删除隐形类，如何更新我的toggleAll以再次正常工作？（它无法隐藏元素。即使它确实删除了不可见属性，display：block仍然存在，并且我的toggleAll不会删除它。）

谢谢！

Answer 1

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

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

＆＃13;

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");
  });

＆＃13;

.ovelseInnhold { 
  display:none;
}

＆＃13;

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

＆＃13;

Answer 2

我在发布之前启动了HTML，所以记住这一点。详细信息在代码段中进行了评论。

段

＆＃13;

var txt = $('#mainText');
var sec = $('.section');
var hdr = $("h1");
var sub = $(".subSection");
var ico = $(".fa");
var all = $(".toggleAll");

sub.addClass("inv");

// Click a title to...
hdr.on('click', function() {
  
  /*
  |Select this title's siblings that follow afterwards
  |and switch their class between .inv and .vis
  */
  $(this).nextAll(sub).toggleClass('inv vis');
});

// Click the .toggleAll button...
all.on("click", function(e) {
  
  // Prevents anchor from jumping
  e.preventDefault();
  
  // Switch between plus and minus icons
  ico.toggleClass('fa-plus fa-minus');
  
  //Switch `.toggleAll` classes
  $(this).toggleClass('close open');
  
  // if this button ends up with class .close...
  if ($(this).hasClass('close')) {
    
    // remove/add = classes .vis and .inv
    sub.removeClass('vis').addClass('inv');
  } 
  else {
    
    // else vice versa
    sub.removeClass('inv').addClass('vis');
  }
});

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #999;
}
.vis {
  display: block;
  opacity: 1;
  line-height: 1;
  width: 100%;
  transition: all 500 linear;
  color: white;
  background: black;
}
.inv {
  display: none;
  opacity: 0;
  line-height: 0;
  width: 0;
  transition: all 500 linear;
}
.close {
  background: black;
  color: yellow;
  line-height: 0;
  transition: all 1s ease-in;
}
.open {
  background: yellow;
  color: black;
  line-height: 3;
  transition: all 1s ease-out;
}
h1,
section {
  cursor: pointer;
  background: rgba(0, 0, 0, .3);
}
.toggleAll {
  width: 100%;
  padding: 15px 5px 0;
}

＆＃13;

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<main id='mainText'>
  <a href='#/' class='toggleAll close'>
    <i class='fa fa-plus fa-2x'>ALL</i>
  </a>
  <section class='section'>
    <h1>I to IV</h1>
    <div class='subSection'>ONE</div>
    <div class='subSection'>TWO</div>
    <div class='subSection'>THREE</div>
    <div class='subSection'>FOUR</div>
  </section>
  <section class='section'>
    <h1>V to VIII</h1>
    <div class='subSection'>FIVE</div>
    <div class='subSection'>SIX</div>
    <div class='subSection'>SEVEN</div>
    <div class='subSection'>EIGHT</div>
  </section>
  <section class='section'>
    <h1>IX to XII</h1>
    <div class='subSection'>NINE</div>
    <div class='subSection'>TEN</div>
    <div class='subSection'>ELEVEN</div>
    <div class='subSection'>TWELVE</div>
  </section>
</main>

＆＃13;

如何让jQuery用fadeToggle切换一个类？

2 个答案:

段