如何切换下拉箭头

Question

这是我用来隐藏和显示带有幻灯片切换效果的div的代码.

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
        });
    });

但是我想添加一些切换箭头来显示切换的div是向上还是向下.

这是我到目前为止所做的一切,它做了我希望它做的一半:

jQuery(document).ready(function() {
    jQuery(".option-content").hide();
    jQuery("#arrow-up").hide();
    jQuery(".option-heading").click(function()
        {
            jQuery(this).next(".option-content").slideToggle(500);
            jQuery("#arrow-up").toggle();
            jQuery("#arrow-down").toggle();
        });
});

这会切换箭头,但有两个问题:

1. 向下箭头保持显示
2. 每个div都会切换每一个箭头,所以当一些div上升而另一个下来时,它们都显示为向下.

任何想法都会受到关注

Answer 1

• 使用:before伪装饰箭头图标
• 使用jQuery .toggleClass()

jQuery(function($) { // DOM ready and $ alias in scope

  /**
   * Option dropdowns. Slide toggle
   */
  $(".option-heading").on('click', function() {
    $(this).toggleClass('is-active').next(".option-content").stop().slideToggle(500);
  });

});

.option-heading:before           { content: "\25bc"; }
.option-heading.is-active:before { content: "\25b2"; }

/* Helpers */
.is-hidden { display: none; }

<div class="option-heading">HEADING</div>
<div class="option-content is-hidden">
  content<br>content<br>content<br>content<br>content<br>content<br>content
</div>

<script src="//code.jquery.com/jquery-3.3.1.js"></script>

PS:如果你使用一些不同的字体图标(比如ie:icomoon)而不是添加相应的十六进制代码,也font-family: 'icomoon';可以添加:before伪.