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