如何jQuery有条件地切换并添加类名？

Question

我想要一个按钮，点击后会添加一个类名“in”或者如果“in”存在已经删除它。

它确实添加了“in”类，但是一旦设置它再次单击时不会删除它。

如何在课程“崩溃”中添加“in”并在再次点击时将其删除？

  $(document.getElementById("toggle-expand-sections")).click(function() {
    if ($('#toggle-expand-sections').hasClass("enabled")) {
      $('#description-form .collapse').addClass("in");
    } else {
      $('#description-form .collapse').removeClass("in");
      $('#toggle-expand-sections').addClass("enabled");
    }
    $('#toggle-expand-sections .toggle').toggle();
  });

#toggle-expand-sections {
	text-align: center;
	margin: 0 auto;
	padding: 2rem;
}

.collapse {
	display: none;
}	

.in {
	display: block !important;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/js/font-awesome.min.js" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="toggle-expand-sections" class="btn btn-info">
  <i class="fa fa-toggle-off toggle" title="expand all sections"></i>
  <i class="fa fa-toggle-on toggle" style="display: none" title="collapse all sections"></i>
</button>

<div class="collapse">
  <div class="subheader-description">foo</div>
</div>

<div class="collapse">
  <div class="subheader-description">bar</div>
</div>

<div class="collapse">
  <div class="subheader-description">baz</div>
</div>

Answer 1

你当然不知道.toggle()方法......
说明： 显示或隐藏匹配的元素。

了解它如何减少您的代码（以及错误的可能性，无论是逻辑还是语法）。

＆＃13;

＆＃13;

// Toggle "Expand/Collapse All Sections" Button
$('#toggle-expand-sections').on('click', function() {
  $(this).find('.toggle').toggle();
  $(".collapse").toggle();
});



/*
  if ($('#toggle-expand-sections').hasClass("enabled")) {
    $('#toggle-expand-sections').removeClass("enabled");
    $('.collapse').removeClass("in");
  } else {
    $('.collapse').addClass("in");
    $('#toggle-expand-sections').addClass("enabled");
  }
});
*/

＆＃13;

#toggle-expand-sections {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
}

.collapse {
  display: none;
}

/*
.in {
  display: block !important;
}
*/

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/js/font-awesome.min.js" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="toggle-expand-sections" class="btn btn-info">
  <i class="fa fa-toggle-off toggle" title="expand all sections"></i>
  <i class="fa fa-toggle-on toggle" style="display: none" title="collapse all sections"></i>
</button>

<div class="collapse">
  <div class="subheader-description">foo</div>
</div>

<div class="collapse">
  <div class="subheader-description">bar</div>
</div>

<div class="collapse">
  <div class="subheader-description">baz</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么不使用jQuery的toggleClass方法？

$(function() {
    $("#yourbutton").on("click", function() {
        $("#yourelement").toggleClass("in");
    ))
});