平滑手风琴/更改FA单击

Question

我正在尝试自定义手风琴以在打开和关闭时更改图标。我不知道如何将FA图标移动到文本之后，而不是文本之前。

我希望设置为显示"类别(chevron-down)"&;然后当点击时，显示"类别(箭头向上)"。以下是目前为止的内容:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
<i class="fa fa-chevron-down"></i> Categories
</h1>
<div id="showhide" style="display:none;">
<ul>
<li><a href="#">Hello World</a>
</li>
</ul>
</div>

JS

function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if ($(h1).text().trim() == 'Categories') {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Hide');
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories');
x.fadeOut();
}
}

CodePen: https://codepen.io/chadwicked123/pen/porRoOq

Answer 1

你必须在js上使用prepend

这里是更新后的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
Categories
<i class="fa fa-chevron-down"></i>
</h1>
<div id="showhide" style="display:none;">
<ul>
<li><a href="#">Hello World</a>
</li>
</ul>
</div>

js的

function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if ($(h1).text().trim() == 'Categories') {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend(' Hide');
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend(' Categories');
x.fadeOut();
}
}

Codepen: https://codepen.io/nahid_hridoy/pen/ZEJLEwN