jQuery的手風琴帶圖標

我用一個簡單的jQuery手風琴從頁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; }

現在我需要一個提示添加tw o在<h5>之前的開放式和封閉式手風琴的Font Awesome的不同圖標。

來源

2017-07-21 Robert

內，您的點擊功能，只需撥動你要使用的FA-圖標關聯的類。 –

感謝您的回答。我不是一個有經驗的jquery用戶。你能舉個例子嗎？ – Robert

我留下了一個答案，以及一個應該幫助你的jsfiddle。 –

在您的點擊功能中，使用與您想要使用的fa-icon關聯的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>

來源

2017-07-21 18:31:50

非常感謝，解決方案几乎完美。只有一個問題仍然存在：在調用網站後，第一個項目已打開，而所有其他項目都關閉。所以第一個項目需要另一個圖標而不是其他的圖標。那可能嗎？ – Robert

當然，只要在起始html中放置任何你想要的圖標，jquery就會自動爲你切換。如果有幫助，我可以編輯小提琴。 –

再次感謝。現在everthing是美好的。 – Robert

jQuery的手風琴帶圖標

回答

相關問題