Как сделать чтобы выпадающее меню двигало элементы вниз, а не перекрывало их?

Question

 $('.select').each(function() {
    const _this = $(this),
        selectOption = _this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        duration = 450; // длительность анимации 

    _this.hide();
    _this.wrap('<div class="select"></div>');
    $('<div>', {
        class: 'new-select',
        text: _this.children('option:disabled').text()
    }).insertAfter(_this);

    const selectHead = _this.next('.new-select');
    $('<div>', {
        class: 'new-select__list'
    }).insertAfter(selectHead);

    const selectList = selectHead.next('.new-select__list');
    for (let i = 1; i < selectOptionLength; i++) {
        $('<div>', {
            class: 'new-select__item',
            html: $('<span>', {
                text: selectOption.eq(i).text()
            })
        })
        .attr('data-value', selectOption.eq(i).val())
        .appendTo(selectList);
    }

    const selectItem = selectList.find('.new-select__item');
    selectList.slideUp(0);
    selectHead.on('click', function() {
        if ( !$(this).hasClass('on') ) {
            $(this).addClass('on');
            selectList.slideDown(duration);

            selectItem.on('click', function() {
                let chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectHead.text( $(this).find('span').text() );

                selectList.slideUp(duration);
                selectHead.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(duration);
        }
    });
});

  .select {
    display: block;
    max-width: 215px;
    width: 100%;
    position: relative;
}

.new-select {
    position: relative;
    border: 1px solid #ced4da;
    padding: 10px 15px;
    cursor: pointer;
    user-select: none;
}

.new-select__list {
    position: absolute;
    top: 45px;
    left: 0;
    border: 1px solid #ced4da;
    cursor: pointer;
    width: 100%;
    z-index: 2;
    background: #fff;
    user-select: none;
}

.new-select__list.on {
    display: block;
}

.new-select__item span {
    display: block;
    padding: 10px 15px;
}

.new-select__item span:hover {
    color: #12b223;
}

.new-select:after {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 9px;
    top: 9px;
    background: url('path-to-image') no-repeat right center / cover;
    opacity: 0.6;

    -webkit-transition: all .27s ease-in-out;
        -o-transition: all .27s ease-in-out;
            transition: all .27s ease-in-out;

    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}

.new-select.on:after {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}

   <select name="orders"  id="orders_statuses" class="select">
            <option value="active">Активные заявки</option>    
            <option value="checking_option">Заявки на проверке</option>
            <option value="reaclculation_option">Пересчитанные заявки</option>
            <option value="finished">Заверщенные заявки</option>
            <option value="canceled">Отмененные заявки</option>
            <option value="all">Все заявки</option>
          </select>
          
         <h3>Блок который нужно подвигуть</h3>

Answer 1

Проще всего, сделать свой кастомный сэлект:

let active = document.querySelector('.active');
let otherelements = document.querySelector('.others');


active.addEventListener('click', ()=>{otherelements.classList.toggle('visible')})
otherelements.addEventListener('click', (e)=>{
active.innerHTML = e.target.innerText+ `<span class = 'arrow'>▼</span>`
})

.active {
  border: 1px solid black;
  width: 200px;
  height: 20px;
}

.arrow{
   content: "▼";
    display: block;
    position: relative;
    color: black;
    width: 20px;
    height: 20px;
    left: 180px;
    right: 0;
    top: -15px;
}
.others{
   width: 200px;
   border: 1px solid black;
   display: none;
}
.visible {
  display: block;
}

   <div class="select-container">
            <div class="active">Активные заявки <span class = 'arrow'>▼</span> </div>   
            <div class="others">
            <div class="checking_option">Заявки на проверке</div>
            <div class="reaclculation_option">Пересчитанные заявки</div>
            <div class="finished">Заверщенные заявки</div>
            <div class="canceled">Отмененные заявки</div>
            <div class="all">Все заявки</div>
            </div> 
          </div>
          
         <h3>Блок который нужно подвигуть</h3>

БЛОГ НА HUSL

Как сделать чтобы выпадающее меню двигало элементы вниз, а не перекрывало их?

Ответы (1 шт):