Question

有一些自定义输入下拉菜单。单击其中任何一个后，它应该放在第一个位置并折叠其他位置。但是它把.inputGroup放在可折叠之外。怎么预防呢？

event <- factor(eventDat$eventF, levels=ev.alph)  
seqDat<- seqecreate(id=eventDat$id, 
                    timestamp=eventDat$timeframe,
                    event=event)
seqDat[1]

## [1] (I01.I02.I03.I17.I05.I16,T222.T511.T30.T12,noProc)-1-(apcdischarge)

这里有一些jsFiddle。

Answer 1

将该元素添加到.collapse格中。

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

$("#orderStatus .inputGroup").click(function() {
  $('#orderStatus .collapse').prepend($(this));
  $('#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>

Answer 2

首先，删除可见的var mapdiv = document.createElement('div'); shadow.appendChild(mapdiv); var map = L.map(mapdiv)并将其添加到input-group，然后再插入选择的内容。

JSFiddle

您可以在这里看到

order-status-list

$("#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;
}

Answer 3

您可以使用此功能

$("#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');
})

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

3 个答案: