带有伪箭头的 slideToggle

Question

我正在使用打开和关闭 div 的脚本，但我想解决的是如何添加（和切换）fontawesome open/close 箭头图标到 .揭示 class。我喜欢使用伪元素的想法，但我对 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/ 当然你可以选择任何你想要的字体图标

带有伪箭头的 slideToggle

slideToggle with pseudo arrow

javascript

css

jquery

slidetoggle