@aksutov1996

Как переделать JS, чтоб подменю открывалось по нажатию на область li, а не на buttom?

Всем привет.
Я тут иду простым и не простым методом. Хочу себе сделать быстренько сайт на 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';
});

Хотябы только на открытие, не работает.
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
@aksutov1996 Автор вопроса
Почему-то все ответы мне дали в комментарии, поэтому выделить нужного не могу.
Ответы были только на 1ый мой вопрос и все ответы направлены на то, чтоб создать отдельно js, ковырять старый от темы никто не предложил.
Сергей Сергей, дал полезный ответ в комментарии, этот ответ мне был ближе всего.
Но он не работает. Скорее всего из-за специфичности уже написанных js от темы.
Но этот ответ стал для меня объектом изучения, и я узнал больше о использовании селекторов и много нового. В общем навёл меня на многие вопросы, ответы которых я нашёл в гугле.
В итоге я перепробовал много разных подходов и сейчас остановился вот на таком коде:
$('li.menu-item-has-children').on('click', function() {
  //var stl = $('ul', 'li.menu-item-has-children').attr ('style');
  var stl = $('li.menu-item-has-children', 'div#ast-mobile-header').children("ul").attr ('style');
  if (stl == 'display: none;'){
    $('ul', 'li.menu-item-has-children').attr ('style', 'display: block;');
  }
  else {$('ul', 'li.menu-item-has-children').attr ('style', 'display: none;');}
  //return false; //перестаёт работать ссылка в вложенном меню
});


И я совсем запутался.
Нуждаюсь опять в помощи, не знаю, будет ли продолжение моих вопросов видно и будет ли активность, пока попробую здесь, если не получится создам новый вопрос.
Меню раскладывается.
Вопросы:
1. Почему-то, используя return false или true в конце, перестаёт работать ссылка у раскладывающегося (вложенного) меню. Видимо плохо догоняю пока что эту логику.
2. В коде есть закомментированный участок:
//var stl = $('ul', 'li.menu-item-has-children').attr ('style');

Если так объявить переменную, то почему-то работа происходит такая:
Я открываю мобильное меню, нажимаю на link, в ожидании, что раскроется подменю, но он меняется в оттенке и не раскрывается с 1го клика, но после такого клика, всё работает. При чём этот же эффект появился и у кнопки со стрелочкой, которая изначально рассчитана темой для раскрытия подменю.
3. А вот чудо. Поток мыслей был такой, не хочу, чтобы мой js "мусорил" в работе сайта. А, используя данные селекторы, js вносит изменения и у шапки desktopной версии (эти шапки оформлены разными блоками).
Я захотел ограничить работу js только на шапку мобильной версии.
Вот моя попытка:
var stl = $('li.menu-item-has-children', 'div#ast-mobile-header').children("ul").attr ('style');

Предполагал, что я беру элементы с тегом ul, которые лежат в элементах li с классом menu-item-has-children, т.е. только в таких ссылках, которые имеют подменю, и хочу, чтоб это были такие li, которые находятся в блоке div с id ast-mobile-header.
Это не сработало, js все равно меняет стиль у элемента в шапке десктопной версии. НО! Ушла проблема, описанная во 2ом вопросе, но осталась у кнопки со стрелочкой. ЧТО ЗА ЧУДЕСА! Я тут чо-то творю и не знаю что. Помогите разобраться)
На всякий случай прикреплю скрин меню. Делаю на локалке.
60e80fc4d9f8b920327042.jpeg
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы