javascript - 带伪箭头的 SlideToggle

Question

我正在使用一个打开和关闭 div 的脚本，但我想要解决的是如何将 fontawesome 打开/关闭箭头图标添加(和切换)到 .reveal 类。我喜欢使用伪元素的想法，但事实证明我对 javascript 的有限了解很困难。

有人可以提供任何指导吗？

$(document).ready(function() {
    $('.reveal').click(function() {
        $(this).prev('div').slideToggle();
    });

    $('.unreveal').click(function() {
        $(this).parent().slideUp();
    });
});



    <div class="slidingDiv">
       <p>content goes here</p>   
    </div>  
    <a class="reveal" href="#">Open / Close</a>

Answer 1

您可以使用toggleClass:

 $(document).ready(function() {
     $('.reveal').click(function() {
       $(this).prev('div').slideToggle();
       $(".reveal i").toggleClass("fa-arrow-up fa-arrow-down");
  });


});

fiddle http://jsfiddle.net/t6cfwLcq/1/ 当然你可以选择任何你想要的字体图标