带有图标的Jquery折叠面板
带有图标的Jquery折叠面板
提问于 2017-07-22 02:15:02
我使用了来自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; }
现在我需要一个提示添加两个不同的图标字体Awesome的一个开放的和一个关闭的手风琴在<h5>的前面。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-22 02:31:51
在单击函数中，使用与要使用的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45244240
复制相关文章
相似问题
腾讯云开发者
