我使用了第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图标。
答案 0 :(得分:0)
在点击功能中,使用与您要使用的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>