平滑手风琴/更改 FA onclick

Question

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

我希望设置显示“类别 (chevron-down)”，然后单击时显示“类别 (chevron-up)”。这是我目前所拥有的：

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();
        }
    }

代码笔：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