JSFiddle
Имеется панель навигации:
<div class="bottom-line">
<div class="container-fluid">
<div class="row align-items-center">
<!-- BEGIN MAIN NAV -->
<div class="col-sm-8 col-md-9">
<nav class="navbar navbar-light navbar-expand-sm">
<div class="navbar-collapse offcanvas-collapse float-sm-left">
<div class="d-flex flex-row justify-content-between align-items-center py-2 d-sm-none">
<div>
<small class="text-muted text-uppercase">г.Москва</small>
<br>
<small class="text-primary text-uppercase">Первый официальный маркет
<br> электротранспорта
</small>
</div>
<!-- close nav button -->
<div>
<button type="button"
class="navbar-close navbar-toggler text-primary p-0 border-0"
data-toggle="offcanvas">
<i class="icon icon-close"></i>
</button>
</div>
</div>
<!-- BEGIN NAV -->
<ul class="navbar-nav mr-auto">
<!-- catalog list -->
<li class="nav-item nav-item-main dropdown position-relative mr-sm-2">
<!-- only icon -->
<button type="button"
class="navbar-toggler border-0 d-none d-sm-inline-flex float-left">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="nav-link float-left" id="catalogList"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Каталог
<span class="d-sm-none">товаров</span></a>
<div class="dropdown-menu shadow-none py-sm-4 bg-light"
aria-labelledby="catalogList">
<a href="#" class="dropdown-item py-sm-3 px-lg-4">Моноколеса</a>
<a href="#" class="dropdown-item py-sm-3 px-lg-4">Гироскутеры</a>
<a href="#" class="dropdown-item py-sm-3 px-lg-4">Электросамокат</a>
<a href="#" class="dropdown-item py-sm-3 px-lg-4">Электровелосипеды</a>
<a href="#" class="dropdown-item py-sm-3 px-lg-4">Сигвеи</a>
<a href="#" class="dropdown-item py-sm-3 px-lg-4">Электроскутеры</a>
<a href="#" class="dropdown-item py-sm-3 px-lg-4">Аксессуары</a>
</div>
</li>
<li class="nav-item nav-item-static">
<a class="nav-link" href="#">Акции</a>
</li>
<li class="nav-item nav-item-static">
<a class="nav-link" href="#">Доставка</a>
</li>
<li class="nav-item nav-item-static">
<a class="nav-link" href="#">Поддержка</a>
</li>
<li class="nav-item nav-item-static">
<a class="nav-link" href="#">Обзоры</a>
</li>
<li class="nav-item nav-item-static">
<a class="nav-link" href="#">Сертификаты</a>
</li>
<li class="nav-item nav-item-static">
<a class="nav-link" href="#">Возврат и обмен</a>
</li>
<li class="nav-item nav-item-static">
<a class="nav-link" href="#">Сервис</a>
</li>
<!-- more list -->
<li class="nav-item nav-item-more dropdown d-none">
<a href="#" class="nav-link dropdown-toggle" id="moreList"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ещё</a>
<div class="dropdown-menu" aria-labelledby="moreList">
<a class="dropdown-item d-none" href="#">Акции</a>
<a class="dropdown-item d-none" href="#">Доставка</a>
<a class="dropdown-item d-none" href="#">Поддержка</a>
<a class="dropdown-item d-none" href="#">Обзоры</a>
<a class="dropdown-item d-none" href="#">Сертификаты</a>
<a class="dropdown-item d-none" href="#">Возврат и обмен</a>
<a class="dropdown-item d-none" href="#">Сервис</a>
</div>
</li>
</ul>
<!-- END NAV -->
</div>
</nav>
</div>
<!-- END MAIN NAV -->
<!-- BEGIN TEXT INFO -->
<div class="col-sm-4 col-md-3 d-none d-sm-block text-muted">
<div class="info-text d-sm-flex flex-column float-right">
<small class="d-sm-block font-weight-light">часы работы шоу-рума:
<span class="font-weight-normal">10:00-21:00</span>
</small>
<small class="d-sm-block font-weight-light">сервис центр:
<span class="font-weight-normal">10:00-18:00</span>
</small>
<small class="d-sm-block font-weight-light">приём заявок на сайте:
<span class="text-primary">круглосуточно</span>
</small>
</div>
</div>
<!-- END TEXT INFO -->
</div>
</div>
</div>
jQuery функция:
let recountNavItems = () => {
let navCatalog = $('.navbar-nav');
let mainMenu = navCatalog.find('.nav-item-main');
let staticItems = navCatalog.find('.nav-item-static');
let moreItems = navCatalog.find('.nav-item-more');
let staticItemsMore = moreItems.find('.dropdown-item');
let rightInfoBox = $('.bottom-line').find('.info-text');
let hiddenClass = 'd-none';
let staticItemsMaxWidth = navCatalog.outerWidth(true) -
mainMenu.outerWidth(true) -
moreItems.outerWidth(true) - rightInfoBox.outerHeight(true) - 20;
let widthStaticItems = 0;
let hiddenIndex = false;
let hasMore = true;
console.log(staticItemsMaxWidth);
$.each(staticItems, (i, item) => {
$(item).removeClass(hiddenClass);
widthStaticItems += $(item).outerWidth();
if (widthStaticItems >= staticItemsMaxWidth && window.matchMedia('(min-width: 768px)').matches) {
if (hiddenIndex === false) hiddenIndex = i;
$(item).addClass(hiddenClass);
}
});
$.each(staticItemsMore, (i, item) => {
hasMore = $(item).not('.' + hiddenClass).length > 0;
((hiddenIndex === false) || (i < hiddenIndex)) ?
$(item).addClass(hiddenClass) :
$(item).removeClass(hiddenClass);
});
hasMore ?
$(moreItems).removeClass(hiddenClass) :
$(moreItems).addClass(hiddenClass);
};
recountNavItems();
$(window).resize(() => recountNavItems());
Функция скрывает/отображает пункты меню в зависимости от размера панели, лишние пункты отображаются в выпадающем списке "ещё", если все пункты отображены в панели, пункт "ещё" скрывается.
При загрузке страницы вызывается функция но пересчет происходит не корректно, только после изменения размера окна, т.е. после вызова события "resize"
Подскажите в чем проблема? Почему не правильно пересчитывается при загрузке страницы?
JSFiddle
Простой
