Как развернуть div снизу вверх, когда не хватает места

Leron спросил: 10 мая 2018 в 04:22 в: javascript

Я создал раскрывающееся меню, упрощенную версию которого вы можете увидеть здесь - FIDDLE. Как вы можете видеть, у меня есть несколько таких меню:

<div id="container">
<div class="wrapper-main">
  <input class="selected"/>  <div class="dropdown-wrapper ae-hide">
    <div class="selectable">1</div>
    <div class="selectable">2</div>
    <div class="selectable">3</div>
  </div>
</div>
...
</div>

, и они действительно могут быть динамически добавлены в DOM, поэтому счетчик не фиксирован. Когда высота становится слишком большой, отображается прокрутка.

Я хочу, если при расширении меню высота меню больше, чем пространство внизу, чтобы отобразить меню, начинающееся со дна подниматься. Еще одна вещь, которая делает это, я думаю, сложнее то, что не все меню будут иметь одинаковое количество <div> s (одна и та же высота).

Однако я просматриваю сеть и не могу, t найти что-то полезное.

1 ответ

Есть решение
Savan S ответил: 10 мая 2018 в 05:29

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

     $('body').on('click', '.selected', function (event) {
        $(this).next('.dropdown-wrapper').toggleClass('ae-hide');
        var bottomSpace = $(this).offset().top + $(this).outerHeight();
        var dropdown = $(this).next('.dropdown-wrapper');
        if ((bottomSpace + $(dropdown).outerHeight()) > $("#container").height()) {
            $(dropdown).css('top', $(dropdown).height() * (-1));
        }
    });

jsFiddle

Примечание. У меня есть Outerheight пользователя вместо высоты, так как внешний свет включает в себя дополнение и границу. Разница между высотой и внешним фоном jquery

Leron ответил: 10 мая 2018 в 05:14
Здравствуй. Просто два вопроса: почему вы предпочитаете outerHeight() over height() и почему эти дополнительные 40px в $(this).offset().top + $(this).outerHeight(true) + 40;? Заранее спасибо.
Savan S ответил: 10 мая 2018 в 05:31
Ошибка 40px была моей ошибкой. Простите за это. Обновлен ответ и ссылка на скрипку. Проверь сейчас.
Leron ответил: 11 мая 2018 в 05:53
Ну, честно говоря, я думаю, что эти 40px, возможно, не так уж плохи в идее. Я написал что-то похожее на ваш код (вот почему я попросил height () vs outerHeight) и посмотреть, какой комментарий я оставил на сегодня: //TODO maybe adjust a little so it's not pixel perfect., вы думаете, что это хорошая идея добавить дополнительные пространство просто для хорошей меры?
Savan S ответил: 11 мая 2018 в 06:01
Да. Хорошо иметь какое-то пространство, поскольку может быть заполнение контейнера. Кроме того, если выпадающая высота такая же, как и в нижнем пространстве, то она будет отображаться ниже, а раскрывающееся меню будет выглядеть как дно. Это будет плохой пользовательский интерфейс. Вы можете добавить дополнительное пространство, например, 40px, оно не создаст никаких проблем.

Дополнительное видео по вопросу: Как развернуть div снизу вверх, когда не хватает места

Анимированная прокрутка страницы на jQuery

jQuery - Появление и скрытие блока при нажатие на ссылку

Изучение CSS/CSS3 | #10 - Позиционирование блоков в CSS + создание небольшого веб сайта