Question

我使用了第https://www.mediaevent.de/javascript/lib-jquery-Plugins.html页

中的一个简单的jquery手风琴

<script type="text/javascript">
$('#drawers').find('h5').click(function(){
$(this).next().slideToggle();
$("#drawers div").not($(this).next()).slideUp();
});
</script>

HTML

<ul id="drawers">
<li>
  <h5>Item 1</h5>
  <div class="first">AAAA</div>
</li>
…
<li>
  <h5>Item 2</h5>
  <div>BBBB</div>
</li>

和CSS

#drawers div { display:none; }
#drawers div.first { display:block; }

现在我需要一个提示，在<h5>前面为开放和闭合的手风琴添加两个不同的Font Awesome图标。

Answer 1

在点击功能中，使用与您要使用的fa图标相关联的toggleClass()。我为你准备了一个快速小提琴。 https://jsfiddle.net/av17nkbk/2/

<script>
   $('#drawers').find('h5').click(function(){
       $(this).next().slideToggle();
       $(this).find('i.fa').toggleClass('fa-caret-down fa-caret-up');
       $("#drawers div").not($(this).next()).slideUp();
        });
</script>

<ul id="drawers"> <li> <h5><i class="fa fa-caret-down"></i>Item 1</h5> <div class="first">AAAA</div> </li>

Jquery手风琴与图标

1 个答案: