javascript - 将 div 移至顶部的正确方法是什么？

Question

获得了一些自定义输入下拉列表。单击其中任何一个后，它应该放在第一个位置并折叠其他位置。但它把 .inputGroup 放在 collapsible 之外。如何预防？

  <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>
                            <div class="inputGroup">
                                <input id="deleteOrder" name="radio" type="radio">
                                <label for="deleteOrder" class="deleteOrder">delete</label>
                            </div>
                        </div>
                    </div>

$("#orderStatus .inputGroup").click(function () {
        $('#orderStatus').prepend($(this));
        $('#order-status-list').collapse("hide");
    });

    $(".order-status-selector").click(function () {
        $(this).toggleClass('rotated');
    });

这是一些 jsFiddle .

Answer 1

首先，删除可见的 input-group 并将其添加到 order-status-list 中，然后再插入选择项。

JSFiddle

你可以在这里看到-

$("#orderStatus .inputGroup").click(function() {
  $('#order-status-list').append($('#orderStatus > .inputGroup'));
  $(this).insertAfter($('.order-status-selector'));
  $('#order-status-list').collapse("hide");
});

$(".order-status-selector").click(function() {
  $(this).toggleClass('rotated');
});

.order-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #ccc;
}

.order-status .inputGroup input {
    position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.order-status .inputGroup label {
    width: 170px;
    padding: 8px 20px;
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
    border-radius: 32.5px;
    color: #fff;
    margin-bottom: 10px;
    font-size: 11px;
}

.order-status-selector {
    position: absolute;
    top: 5px;
    right: 130px;
    width: 30px;
    height: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 9;
}

.order-status-selector:hover {
    cursor: pointer;
}

.order-status-selector:after {
    content: url('https://api.iconify.design/simple-line-icons:arrow-down.svg?height=16&inline=true&color=%23fff');
    border: none;
    position: absolute;
    top: 3px;
    right: 0;
    width: 16px;
    height: 16px;
    z-index: 9;
    transition: transform 0.3s ease-in-out;
}

.rotated.order-status-selector:after {
    transform: rotateX(180deg);
}

.order-status .confirmed,
.order-status.confirmed {
    background-color: #39ccd2;
}

.order-status .new,
.order-status.new {
    background-color: #7db9fd;
}

.order-status .paid,
.order-status.paid {
    background-color: #f978ff;
}

.order-status .shipped,
.order-status.shipped {
    background-color: #7fc637;
}

.order-status .fulfilled,
.order-status.fulfilled {
    background-color: #057568;
}

.order-status .return,
.order-status.return {
    background-color: #d0021b;
}

.order-status .deleteOrder,
.order-status.deleteOrder {
    background-color: #282f36;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


<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>
    <div class="inputGroup">
      <input id="deleteOrder" name="radio" type="radio">
      <label for="deleteOrder" class="deleteOrder">delete</label>
    </div>
  </div>
</div>