将div移到顶部的正确方法是什么？

Question

有一些自定义输入下拉菜单。单击其中的任何一个后，它应该放在第一个位置，然后折叠其他位置。但是它把.inputGroup放在可折叠之外。怎么预防呢？  <div class="order-status" id="orderStatus">                        <div class="order-status-selector" data-toggle="collapse" data-target="#order-status-list">                        </div>                        <div class="inputGroup">                            <input id="confirmed" name="radio" type="radio" checked>                            <label for="confirmed" class="confirmed">confirmed</label>                        </div>                        <div class="collapse" id="order-status-list">                            <div class="inputGroup">                                <input id="new" name="radio" type="radio">                                <label for="new" class="new">new</label>                            </div>                            <div class="inputGroup">                                <input id="paid" name="radio" type="radio">                                <label for="paid" class="paid">paid</label>                            </div>                            <div class="inputGroup">                                <input id="shipped" name="radio" type="radio">                                <label for="shipped" class="shipped">shipped</label>                            </div>                            <div class="inputGroup">                                <input id="fulfilled" name="radio" type="radio">                                <label for="fulfilled" class="fulfilled">fulfilled</label>                            </div>                            <div class="inputGroup">                                <input id="return" name="radio" type="radio">                                <label for="return" class="return">return</label>                            </div>               这是一些jsFiddle。

Answer 1

您可以使用此功能

$("#orderStatus .inputGroup").click(function () {

    $('#orderStatus .collapse').prepend(this);

    $('#order-status-list').collapse("hide");

});

$(".order-status-selector").click(function () {

    $(this).toggleClass('rotated');

});

$('#order-status-list').on('hide.bs.collapse', function() {

  $(".order-status-selector").toggleClass('rotated');

})