Всем привет. прошу помощи, не могу до конца понять как реализовать изменение ширины выпадающего меню в зависимости от количества элементов. Так как выпадающее меню с position: absolute, то css решения не подходят. Нужно именно решение на JS
...
<li>
<ul class="dropdown-menu last-dropdown-level">
<div class="row">
<div class="menu-item"></div>
<div class="menu-item"></div>
<div class="menu-item"></div>
</div>
<div class="row">
<div class="menu-item"></div>
<div class="menu-item"></div>
</div>
</ul>
</li>
<li>
<ul class="dropdown-menu last-dropdown-level">
<div class="row">
<div class="menu-item"></div>
<div class="menu-item"></div>
</div>
</ul>
</li>
...
var dropdownMenu = $('.dropdown-menu.last-dropdown-level');
var dropdownMenuRow = dropdownMenu.children('.row');
dropdownMenu.each(function () {
var countMenusRow = $(this).children('.row').size();
dropdownMenuRow.each(function () {
var countRowsItem = $(this).children('.menu-item').size();
if(countRowsItem===3) {
dropdownMenu.css('width', '720px');
}
if(countRowsItem===4) {
dropdownMenu.css('width', '1005px');
}
});
});
Вот кусок кода html. Это выпадающее меню 3-го уровня. Суть вот в чем. Когда я делаю проверку на количество элементов в row и присваиваю ширину выпадающему меню, то эта ширина присваивается всем выпадашкам, т.е. присваивается значение ширины для 4х элементов, а по факту всего 3 элемента. Нужно, чтобы для каждого выпадающего меню присваивалась своя ширина. Подскажите, что не так сделал в коде.
