Почему меню постоянно пересчитывается и то скрывается / отображается полностью?

Question

[Павел Сидоров]

Есть главное меню на сайте с пунктом "..." сайт скрывать не буду ссылка

далее скрипт

$(window).resize(function(){
			navigationResize();
		});
	
		navigationResize();
	
		function navigationResize() {  

			$('#nav-more li.more').before($('#overflow > li'));
	
			var navItemMore = $('#nav-more > li.more'),
				navItems = $('#nav-more > li:not(.more)'),
				navItemWidth = navItemMore.width(),
				windowWidth = $('#nav-more').parent().width(),
				navOverflowWidth;
	
			navItems.each(function(){
				navItemWidth += $(this).width();
			});
	
			navItemWidth > windowWidth ? navItemMore.show() : navItemMore.hide();
	
			while (navItemWidth > windowWidth) {
				navItemWidth -= navItems.last().width();
				navItems.last().prependTo('#overflow');
				navItems.splice(-1,1);
			}
			navOverflowWidth = $('#overflow').width();
	
		}

При рейсайзе окна на больших экранах постоянно то скрывает, то показывает последний пункт , хотя места вроде много.
Подскажите почему? Благодарен

Comments

[Василий Dekmer]

По беглому изучению твоего сайта - главное меню обернуто в div`ы с применением flex-разметки. Я подозреваю, что именно flex-разметка "мешает" твоему скрипту позиционировать меню. "Пляска" с последним пунктом меню начинается, если не ошибся, с ширины экрана 1480 и заканчивается на 1550 пикселях. Не знаю зачем я это выяснял))

И коль используешь в проекте Bootstrap, так примени к главному меню навигационную панель Bootstrap. Там и скрытый (выпадающий) пункт легко получается сделать.
ИМХО

[Егор Живагин]

Выведи в консоль navItemWidth и windowWidth вот тут и посмотри, правильные ли там значения

navItemWidth > windowWidth ? navItemMore.show() : navItemMore.hide();
console.info(navItemWidth, windowWidth)

У меня есть ощущение, что странно вычисляется navItemWidth - ты сначала пишешь туда ширину всего навбара, а потом добавляешь ширину каждого отдельного айтема. Итого, мне кажется, значение переменной в 2 раза больше настоящей ширины

[Павел Сидоров]

Егор Живагин, Привет, значение переменной navItemWidth остается неизменной. Вывел переменные в консоль браузера. Значение переменной windowWidth прыгают от 942,141 до 996,141 так как один элемент при ресайзе то уходит в li.more, то появляется обратно

[Егор Живагин]

Павел Сидоров, поправьте проверку немного, у вас там микро-разница в размерах, её надо просто игнорировать
Вот так выглядит нормально:

// если разница больше 1-го пикселя
(windowWidth - navItemWidth) > 1 ? navItemMore.show() : navItemMore.hide()

[Павел Сидоров]

Егор Живагин, если игнорировать эту разницу и изменить проверку, то "..." никогда не появится. условия не будут соблюдены

Answer 1

[copyhold]

не вешайте обновления ДОМ на ресайз - всегда будут гличи.
просто создайте весь дом один раз по загрузке документа и рулите Css-ом