Всем привет.
Я тут иду простым и не простым методом. Хочу себе сделать быстренько сайт на WP на готовой теме от Astra. Но есть проблемы, которые меня не устраивают. Пока что с ними я столкнулся только в шапке, надеюсь на этом их больше не будет.
1. Начну с той, с которой я не справился: меня не устраивает, что в мобильной версии в меню, чтобы открыть подменю, нужно нажимать конкретно на button в виде галочки, я хочу, чтобы оно открывалось при нажатии на всю строку, на область li.
С помощью вот такого
инструмента я отследил участок js, который якобы за это отвечает:
function d(e) {
if (e) {
var t = e.getElementsByTagName("button")[0];
if (void 0 !== t || void 0 !== (t = e.getElementsByTagName("a")[0])) {
var a = e.getElementsByTagName("ul")[0];
if (void 0 !== a) {
a.setAttribute("aria-expanded", "false"), -1 === a.className.indexOf("nav-menu") && (a.className += " nav-menu"), t.onclick = function () {
-1 !== e.className.indexOf("toggled") ? (e.className = e.className.replace(" toggled", ""), t.setAttribute("aria-expanded", "false"), a.setAttribute("aria-expanded", "false")) : (e.className += " toggled", t.setAttribute("aria-expanded", "true"), a.setAttribute("aria-expanded", "true"))
};
for (var n = a.getElementsByTagName("a"), s = a.getElementsByTagName("ul"), o = 0, l = s.length; o < l; o++) s[o].parentNode.setAttribute("aria-haspopup", "true");
for (o = 0, l = n.length; o < l; o++) n[o].addEventListener("focus", L, !0), n[o].addEventListener("blur", L, !0), n[o].addEventListener("click", b, !0)
}
else t.style.display = "none"
}
}
}
В частности инструмент показывает вот эту строку:
-1 !== e.className.indexOf("toggled") ? (e.className = e.className.replace(" toggled", ""), t.setAttribute("aria-expanded", "false"), a.setAttribute("aria-expanded", "false")) : (e.className += " toggled", t.setAttribute("aria-expanded", "true"), a.setAttribute("aria-expanded", "true"))
Я в js нуль. Я потыкался и ничего не добился. Меняется реакция инструмента не на кнопку, а на всю облатсь li, но работа остаётся такой же.
Подскажите, чо поправить.
Возможно интереснее будет сделать стороний дополнительный файл js, который бы переопределял это событие или дополнял. Мне кажется, что так правильнее, потому что , наверное, если я буду обновлять тему, то мои изменения внутри их файлов слетят.
Так же я готов подвинуться, чтоб нажатие не на всю область li была, а возможно только на слово.
2. Почему-то для создания подменю нужно иметь отдельную, в моём случае, не нужную страницу.
Вот у меня пункт "Услуги", где будет 3 пункта.
Я не хочу иметь отдельно страницу услуги, но поскольку я хочу создать подменю, нужно иметь такую страницу из-за особенностей wp или этой темы, я пока не шипко понял.
Решил просто тем, что я создал такую страницу, она с пустым контентом, я уберу её позже от индексирования в robots.txt.
А в окне "Дополнительные стили" в конструкторе wp, я просто накинул код
.menu-item-316 > a {
pointer-events: none;
}
Дополнение:
Потыкал на кнопку и посмотрел, что происходит с кодом html, на основе этого попробовал написать свой js:
let nav = document.querySelector('#site-navigation');
let ul = document.querySelector('#ast-hf-menu-1');
let click_li = document.querySelector('.menu-item-316');
let button = document.querySelector('.menu-item-316 button');
let sub_ul = document.querySelector('.menu-item-316 ul');
click_li.on('click', function(){
nav.className += "toggled";
ul.attr("aria-expanded", true);
click_li.className += "ast-submenu-expanded";
button.attr("aria-expanded", true);
sub_ul.style.display = 'block';
});
Хотябы только на открытие, не работает.
Средний