javascript - 如何使用 jQuery 切换加号和减号图标？

Question

我想切换guide-contentdiv 并将图标更改为+图标，-然后再次更改-为+图标。为此，我有这个 jQuery 和 HTML：

$(document).ready(function() {
  $(".collapse").click(function() {
    $(this).parents().next(".guide-content").toggle();
    $(this).text("+");
  }, function() {
    $(this).text("-");
    $(this).parents().next(".guide-content").toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="guide-collapse">
  <div class="guide-title">
    <h2>アンティーク着物について <span class="collapse">+</span></h2>
  </div>
  <div class="guide-content">
  </div>
</div>
<div class="guide-collapse">
  <div class="guide-title">
    <h2>アンティーク着物について <span class="collapse">+</span></h2>
  </div>
  <div class="guide-content">
  </div>
</div>

但它不会将图标从 + 更改为 - 并将 - 更改为 +。

标签： javascriptjquery

Answer 1

我会使用 CSS 根据一个类来切换它。

这将允许您使用图标来获得更多细节和灵活性。

$('body').on('click', '.collapse', function(event) {
    $(this).toggleClass('isActive');
});