0

Пытаюсь реализовать что-то типа навигации, при клике на элементы которой ниже будет выпадать подсписок, состоящий из нескольких ссылок.

Есть такой JS код:

 (function() {
    var links = document.querySelectorAll('.nav--link-select');
    var subLists = document.querySelectorAll('.nav__sub-list');
    var navItems = document.querySelectorAll('.nav--item-select');

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', showSubList(i),false);
    }

    function showSubList(i){
        return function (evt) {
            // при клике на ссылку закрываем все открытые подсписки
            for (var j = 0; j < subLists.length; j++) {
                subLists[j].classList.remove('nav--sub-show');
                links[j].classList.remove('nav--link-after');
                navItems[j].classList.remove('nav--item-selected');
            }
            evt.stopPropagation();
            evt.preventDefault();
            // console.log(i);
            // при клике на ссылку открываем соответствующий подсписок
            subLists[i].classList.add('nav--sub-show');
            links[i].classList.add('nav--link-after');
            navItems[i].classList.add('nav--item-selected');
        };
    };

    // при клике по окну закрываем все подсписки
    document.onclick = function(evt) {
        for (var k = 0; k < links.length; k++) {
            subLists[k].classList.remove('nav--sub-show');
            links[k].classList.remove('nav--link-after');
            navItems[k].classList.remove('nav--item-selected');
        }
    }

})();

Вот ссылка на Codepen.

При клике по ссылкам .nav--link-select 1, 2 и 4 им добавляется класс nav--link-after, который изменяет внешний вид псевдоэлемента (стрелки). И выпадает подсписок .nav__sub-list путём добавления ему класса nav--sub-show.

Также когда открывается новый подсписок, все те, которые были до него, закрываются; при клике на любой другой элемент окна подсписок также закрывается.

Не понимаю, как реализовать, чтобы при клике на ссылку с открытым подсписком она закрывалась?

1 ответ 1

0

Для этого вам надо сохранять состояние подписка. Заведите массив состояний для каждого подписка, которые будут меняться по мере того, как вы кликаете в соответствующий подписок. Изначально состояния все выключены

var flags = [];

После чего вы кликаете в подписок и там происходит событие, в котором вам надо проверить состояние подписка прежде чем ему добавлять классы.

if (!flags[i]) {
  subLists[i].classList.add('nav--sub-show');
  links[i].classList.add('nav--link-after');
  navItems[i].classList.add('nav--item-selected');
 }

Затем, когда классы определены, мы просто меняем состояние подписка на противоположное.

flags[i] = !flags[i]; 

Это все. Далее смотрим и наслаждаемся.

1
  • Спасибо большое за ваш ответ, все прекрасно работает. 25 мая 2018 в 17:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.