Фокус

12
R
На сайте с 01.12.2012
Offline
86
566

Всем привет.

Подскажите, как добавить в стиль родительскому элементу, когда ссылка в фокусе?

Прошу сильно не пинать, так как я в этом новичок.

Есть примерно следующий код

<nav class="nav-top">
        <ul>
                <li class="nav-top__sp">
                        <a href="/">О Нас</a>
                        <ul>
                                <li><a href="/">О техникуме</a></li>
                                <li><a href="/">Учредитель</a></li>
                                <li><a href="/">Структура</a></li>
                        </ul>
                </li>
        </ul>
</nav>

Когда при помощи Tab делаю фокус на ссылку, нужно чтобы к родительскому элементу с классом nav-top__sp добавлялся ещё один класс.

Пытаюсь сделать примерно так, но почему-то не работает

$(document).ready(function () {
        $('.nav-top a').focus(
                function () {
                        $(this).parents('.nav-top__sp').addClass('www');
                }, function () {
                        $(this).parents('.nav-top__sp').removeClass('www');
                }
        );
});

Заранее всем признателен за подсказку

W1
На сайте с 22.01.2021
Offline
304
#1
Radrigo :
почему-то не работает

Так работает hover. А focus работает иначе, у него только одна функция-обработчик, а не две.

Мой форум - https://webinfo.guru –Там я всегда на связи
R
На сайте с 01.12.2012
Offline
86
#2
webinfo #:

Так работает hover. А focus работает иначе, у него только одна функция-обработчик, а не две.

А можете подсказать, как реализовать добавление класса при фокусировке?
W1
На сайте с 22.01.2021
Offline
304
#3
Radrigo #:
как реализовать

Наверное, так:

$(document).ready(function () {
        $('.nav-top a').focus(
               function () {
                        $(this).parents('.nav-top__sp').addClass('www');
                }
        );
        $('.nav-top a').focusout(
                function () {
                        $(this).parents('.nav-top__sp').removeClass('www');
                }
        );
});
R
На сайте с 01.12.2012
Offline
86
#4
Спасибо большое. Понял, почему не работало. Однако когда фокус переключается на ссылку в подменю, стиль почему-то не добавляется.
W1
На сайте с 22.01.2021
Offline
304
#5
Radrigo #:
Однако когда фокус переключается на ссылку в подменю, стиль почему-то не добавляется.

Я проверял, всё работает.

R
На сайте с 01.12.2012
Offline
86
#6
webinfo #:

Я проверял, всё работает.

Как работает, можно посмотреть на этом сайте. Переключение кнопок видно в версии для слабовидящих. Ссылка с включением тестового шаблона.
https://guspoliteh.ru/index.php?action_skin_change=yes&skin_name=test

После того, как меню раскрывается, фокус переходит на ссылку в подменю, после чего закрывается.

Буду очень признателен, если подскажите, что не так сделал.
Гусевский политехнический техникум
  • guspoliteh.ru
Официальный сайт учебного заведения ГБОУ СПО КО «Гусевский политехнический техникум». Новости, события, достижения
W1
На сайте с 22.01.2021
Offline
304
#7

Как там Милторг? 🤔

Radrigo #:
что не так сделал.

У вас подменю скрытое, если нет того самого класса. Как только уходит фокус с основного пункта, класс убирается и подменю скрывается, поэтому на нём код не срабатывает. Надо сделать так, чтобы подменю не скрывалось.

R
На сайте с 01.12.2012
Offline
86
#8
webinfo #:
Как там Милторг? 🤔

Без понятия😀

webinfo #:

Как там Милторг? 🤔

У вас подменю скрытое, если нет того самого класса. Как только уходит фокус с основного пункта, класс убирается и подменю скрывается, поэтому на нём код не срабатывает. Надо сделать так, чтобы подменю не скрывалось.

Как же тогда можно сделать? Изначально ведь подменю должно быть скрыто

W1
На сайте с 22.01.2021
Offline
304
#9
Radrigo #:
Как же тогда можно сделать?

Это я так с ходу не скажу. Как-то логику скрипта менять, чтобы при переходе на пункт подменю класс с родительского пункта не убирался. Там на самом деле разные варианты могут быть.

R
На сайте с 01.12.2012
Offline
86
#10
webinfo #:

Это я так с ходу не скажу. Как-то логику скрипта менять, чтобы при переходе на пункт подменю класс с родительского пункта не убирался. Там на самом деле разные варианты могут быть.

Спасибо за подсказку. Сделал. Класс убирается только при переходе фокуса с последней ссылки в подменю. Добавил последней ссылке класс.
Может подскажете, как сделать, чтобы скрипт сам определял последнюю ссылку в подменю? Чтобы не прописывать класс.
Еще хотелось бы добавить, чтобы при клике за пределами подменю оно пропадало
Сейчас реализовано вот так
$(document).ready(function () {
        $('.nav-top a').focus(
                function () {
                        $(this).parents('.nav-top__sp').addClass('focus-menu');
                }
        );
        $('.nav-top a.focus-end').focusout(
                function () {
                        $(this).parents('.nav-top__sp').removeClass('focus-menu');
                }
        );
});
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий