将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 () {&nbsp; &nbsp; $('#orderStatus .collapse').prepend(this);&nbsp; &nbsp; $('#order-status-list').collapse("hide");});$(".order-status-selector").click(function () {&nbsp; &nbsp; $(this).toggleClass('rotated');});$('#order-status-list').on('hide.bs.collapse', function() {&nbsp; $(".order-status-selector").toggleClass('rotated');})