Как правильно переместить div наверх?

Получил настраиваемый раскрывающийся список ввода. После нажатия на любой из них он должен разместиться на первой позиции и свернуть другие. Но он помещает .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>
                            <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.

Пожалуйста, добавьте соответствующую часть вашего html непосредственно к вашему вопросу.

— 02.04.2019 11:59

javascript jquery html css

02.04.2019 11:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Добавьте элемент в .collapse div.

$('#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>

02.04.2019 11:59

Ответ принят как подходящий

Сначала удалите видимый 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>

Рад помочь вам :)

— 02.04.2019 13:04

02.04.2019 12:15

Вы можете использовать эту функцию

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

02.04.2019 12:57

Другие вопросы по теме

Изменения прозрачности круговой диаграммы Highchart при наведении

Вставить успешно скрипт не отображается

Как сгенерировать случайное число при клике по изображению

Заполните список выбора результатом Ajax, используя dataTables

Как лучше изменить положение фиксированного элемента

Проверка Boostrap: не проверять десятичное значение, например .00

Как я могу заставить Cropper.js работать с изображениями из URL

Удалить все строки (tr) из таблицы HTML с определенной подстрокой в идентификаторе

Angular 6 - прокрутить вверх, когда отображается модальное окно

Повторно открыть переключатель после отправки формы

Как правильно переместить div наверх?

Ответы 3

Другие вопросы по теме

Похожие вопросы