|
|
| (не показано 6 промежуточных версий этого же участника) |
| Строка 33: |
Строка 33: |
| }); | | }); |
|
| |
|
| | // Автоскролл после открытия спойлера в меню Citizen |
| | $(document).on('click', '.dropdown .dropbtn', function () { |
|
| |
|
| // Универсальный фикс для dropdown, переводим раскрытые меню в поток документа
| | var $dropdown = $(this).closest('.dropdown'); |
| ( function () {
| | var $content = $dropdown.find('.dropdown-content'); |
| function fixDropdown(el) {
| |
| if (!el) return;
| |
| try {
| |
| el.style.position = '';
| |
| el.style.top = '';
| |
| el.style.left = '';
| |
| el.style.right = '';
| |
| el.style.transform = '';
| |
| el.style.zIndex = '';
| |
| el.style.maxHeight = '';
| |
| el.style.overflow = '';
| |
| } catch (e) { /* ignore */ }
| |
| }
| |
|
| |
|
| // На клики по кнопке открывающей меню — удаляем inline-стили у .dropdown-content | | // Даем CSS-анимации завершиться, если она есть |
| document.addEventListener('click', function (e) { | | setTimeout(function () { |
| // попытка поймать ближайший .dropdown | | |
| var but = e.target.closest && e.target.closest('.dropbtn, .dropdown, .dropdown-toggle, [data-dropdown]'); | | // Если блок теперь виден — скроллим к нему |
| if (but) {
| | if ($content.is(':visible')) { |
| // небольшая задержка, чтобы скрипт, открывающий меню, выполнил своё и мы могли почистить | | var top = $dropdown.offset().top - 80; // отступ сверху (регулируется) |
| setTimeout(function () {
| | $('html, body').animate({ scrollTop: top }, 300); |
| var dropdowns = document.querySelectorAll('.dropdown, .dropdown.active, .dropdown.open, .menu-column');
| |
| dropdowns.forEach(function (d) {
| |
| // исправляем сам контейнер
| |
| fixDropdown(d);
| |
| // исправляем контент
| |
| var c = d.querySelector('.dropdown-content, .menu, .dropdown-menu, .citizen-dropdown__content');
| |
| if (c) fixDropdown(c);
| |
| });
| |
| }, 20);
| |
| } | | } |
| }, false);
| |
|
| |
| // При любом модифицировании DOM (на случай, если меню открывает сторонний скрипт)
| |
| var observer = new MutationObserver(function (mutations) {
| |
| mutations.forEach(function (m) {
| |
| if (m.addedNodes && m.addedNodes.length) {
| |
| m.addedNodes.forEach(function (node) {
| |
| if (!(node instanceof HTMLElement)) return;
| |
| if (node.matches('.dropdown, .dropdown-content, .dropdown.active, .dropdown.open, .dropdown-menu')) {
| |
| fixDropdown(node);
| |
| }
| |
| var inner = node.querySelector && (node.querySelector('.dropdown, .dropdown-content, .dropdown.active, .dropdown.open, .dropdown-menu'));
| |
| if (inner) fixDropdown(inner);
| |
| });
| |
| }
| |
| // также пробуем почистить целевые элементы, если у них появились атрибуты стиля
| |
| if (m.target && m.target instanceof HTMLElement) {
| |
| if (m.target.matches && (m.target.matches('.dropdown, .dropdown-content, .dropdown.active, .dropdown.open, .dropdown-menu'))) {
| |
| fixDropdown(m.target);
| |
| }
| |
| }
| |
| });
| |
| });
| |
|
| |
| observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
| |
|
| |
| // Очистка для уже открытых при загрузке
| |
| window.addEventListener('load', function () {
| |
| document.querySelectorAll('.dropdown, .dropdown-content, .dropdown.active, .dropdown.open, .dropdown-menu').forEach(function (el) {
| |
| fixDropdown(el);
| |
| });
| |
| });
| |
|
| |
|
| }() ); | | }, 200); |
| | }); |