Как правильно определить и вызвать событие
Добрый день. Такая проблема. Есть сайт: https://obr.my-joomla.ru/ я сделал главное меню с помощью https://github.com/352Media/flexMenu этого скрипта, там в общем то 1 js файл я вставил его код тут сверху https://obr.my-joomla.ru/templates/obr/js/custom.js и чуть ниже инициализация:
/* Запускаем флексменю и скрываем не поместившиеся пункты */ jQuery(document).ready(function ($) { flexMenu(); }); function flexMenu() { $('ul.navmenu li, ul.navmenu li.flexMenu-viewMore').css('display', 'block'); $('ul.navmenu').flexMenu({ showOnHover: true, linkText: '<svg class="navbar__item-dots"><use xlink:href="#dots-icon"></use></svg>', // это три точки, можно написать текстом "Еще" linkTitle: "Показать еще", linkTextAll: "Меню", linkTitleAll: "Развернуть меню", popupClass: 'more_dropdown', cutoff: 1 }); $('ul.navmenu li, ul.navmenu li.flexMenu-viewMore').css('display', 'block'); }; Так вот, код работает, изначально показывается 4 пункта меню. Если сужать окно браузера, непомещающиеся пункты уходят в выпадающее меню и на экране остается 3, 2 и в конечном итоге меню совсем скрывается. Начинаю расширять окно браузера и пункты меню снова появляются, ощущение что срабатывает resize и от этого выполняется скрипт и скрывает или показывает пункты меню. На сайте есть версия для слабовидящих. В ней кнопками я меняю размер текста, А, А+, А++, и так вот, я увеличиваю размеры, меню становится больше, но не скрываются пункты, начинает криво влезать. Стоит только тронуть размеры браузера или обновить страницу как все хорошо влезает. Я не понимаю как работает это событие, и хочу чтобы оно выполнялось не только когда я обновляю страницу или меняю размеры окна браузера, а когда еще нажимаю на кнопки включения/выключения версии для слабовидящих или изменения размера текста А, А+, А++, чтобы в этот момент когда текст стал больше, скрипт еще раз реагировал и скрывал или показывал пункты меню. Пробовал такое: $(window).trigger('resize'); но к сожалению ничего не дает, я не понимаю какое событие используется в этот момент и как его вызвать без изменения размеров окна. Для демонстрации проблемы, находимся в обычной версии сайта, видим 4 пункта меню. Включаем версию для слабовидящих (глаз наверху справа) и на экране так же 4 пункта меню, а должно быть уже 3 т.к. там чуть другие размеры. Если мы обновим страницу или попытаемся менять размеры окна брузера то на экране в версии для слабовидящих будет 3 пункта. Надо открыть сайт, перейти в версию для слабовидящих и в консоли выполнить какое-то событип и чтобы пункта стало 3, а не 4. Я думаю должно быть что-то типа $(window).trigger('resize');, только чуть другое событие, но это не точно. Туплю второй день, не могу решить эту проблему(( |
Leon2110,
добавить в клики ... $('ul.navmenu').flexMenu({ 'undo' : true }).flexMenu({ showOnHover: true, linkText: '<svg class="navbar__item-dots"><use xlink:href="#dots-icon"></use></svg>', // это три точки, можно написать текстом "Еще" linkTitle: "Показать еще", linkTextAll: "Меню", linkTitleAll: "Развернуть меню", popupClass: 'more_dropdown', cutoff: 1 }); |
рони,
Большое спасибо, это работает как я и хотел. :dance: |
Часовой пояс GMT +3, время: 01:17. |