Как я могу обработать изменение размера окна для моего простого jQuery выпадающего меню? - PullRequest
0 голосов
/ 21 апреля 2020

Я работал над простым пользовательским интерфейсом, который использует раскрывающееся меню. У меня меню работает именно так, как я хочу, за исключением случаев, когда пользователь изменяет размер окна. Я пробовал разные вещи, чтобы справиться с изменением размера, но озадачен, как заставить его работать.

Проблема в том, что функция полагается на установку высоты ul#filter для размещения в абсолютно позиционированном подменю, но После того, как высота была установлена, я не знаю, как вы получите фактическую высоту элемента (предварительно установленную jQuery), из которой можно сделать вычисления. Мне нужно приспособиться к переносу верхнего уровня и подменю, когда окно браузера становится маленьким.

Я, вероятно, упускаю действительно очевидное и краткое решение. У кого-нибудь из вас есть идеи, как выполнить sh это?

JQuery / Javascript:

jQuery(document).ready(function ($) {
    // Filter bar
    jQuery.fn.extend({
        dropdownToggle: function () {
            var $filter = $('#filter'),
                filterHeight = $filter.height(),
                $toggles = $(this).find('.filter-toggle');

            // intialize #filter bottom padding for animation
            $filter.height(filterHeight);

            $toggles.on('click', function () {
                var $dropdown = $(this).next('.dropdown'),
                    dropdownHeight = $dropdown.outerHeight();

                if (!($(this).parent().hasClass('active'))) {
                    $(this).parent().addClass('active');
                    $filter.height(filterHeight + dropdownHeight);
                    $toggles.not($(this)).parent().removeClass('active');
                } else {
                    $(this).parent().removeClass('active');
                    $filter.height(filterHeight);
                }
            });
        }
    });

    $('#filter').dropdownToggle();
});

Вот мой CodePen с минимальным кодом https://codepen.io/tylorreimer/pen/bGVwjYX

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...