@Norum

Почему исчезает контент при нажатии на пустую область?

Есть секция .services, в которой находится .sidebar со списком-меню. При нажатии на один из пунктов меню в .sidebar справа в блоке .services-info появляется контент, который соответствует нажатому пункту, но есть проблема: когда я нажимаю на пустую область, то содержимое блока в .services-info пропадает. В чем проблема?
PS Я использую Swiper JS для полностраничного перелистования блоков и это первый слайд-блок

Весь код https://jsfiddle.net/1ohrf34p/
Сам сайт cn76553.tmweb.ru

Нажал на пункт меню
61069f1462640256857937.jpeg

Нажал на любое пустое пространство
61069f2ccb97a434012765.jpeg

<div class="swiper-slide services-first-slider">
                    <div class="services-bg">
                        <div class="wrapper">
                            <div class="content">
                                <div class="sidebar">
                                    <h3>Наши услуги</h3>
                                    <ul class="sidebar-menu">
                                        <li id="business-card"><a href="#">Сайт-визитка</a></li>
                                        <li id="landing"><a href="#">Landing page</a></li>
                                        <li id="market"><a href="#">Интернет-магазин</a></li>
                                        <li id="corp"><a href="#">Корпоративный сайт</a></li>
                                        <li id="bitrix"><a href="#">1C Битрикс</a></li>
                                        <li id="advertising"><a href="#">Контекстная реклама</a></li>
                                        <li id="seo"><a href="#">SEO оптимизация</a></li>
                                        <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                                        <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                                    </ul>
                                    <ul class="sidebar-nav">
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                                <div class="services-info">
                                    <div class="content">
                                        <div class="business-card">Сайт-визитка</div>
                                        <div class="landing invisible">Landing page</div>
                                        <div class="market invisible">
                                            <div class="services-info-title">
                                                Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                            </div>
                                            <p>Что входит в нашу работу:</p>
                                            <div class="services-info-block">
                                                <ul>
                                                    <li>+ Подготовка технического задания</li>
                                                    <li>+ Разработка прототипа</li>
                                                    <li>+ Верстка макета</li>
                                                    <li>+ Интеграция дизайна</li>
                                                </ul>
                                                <ul>
                                                    <li>+ Написание уникальных текстов</li>
                                                    <li>+ Сбор семантики</li>
                                                    <li>+ Тестирование и запуск</li>
                                                    <li>+ Подключение веб-аналитики</li>
                                                </ul>
                                            </div>
                                            <div class="services-info-footer">
                                                <a class="order" href="#">Сделать заказ</a>
                                                <a href="#" class="details next">
                                                    <span>Узнать подробнее</span>
                                                    <div class="button-next"></div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="corp invisible">Корпоративный сайт</div>
                                        <div class="bitrix invisible">1C Битрикс</div>
                                        <div class="advertising invisible">Контекстная реклама</div>
                                        <div class="seo invisible">SEO оптимизация</div>
                                        <div class="promotion invisible">Продвижение в соц. сетях</div>
                                        <div class="marketing invisible">Контент-маркетинг</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


.invisible {
    display: none;
}

.visible {
    display: block;
}


document.querySelector('ul.sidebar-menu').addEventListener("click", function(e) {
        e.preventDefault();
        let clickedId = e.target.parentNode.id;
        let divs = document.querySelectorAll('div.services-info>div.content>div');
        divs.forEach((el) => {
            el.classList.remove('visible');
            el.classList.add('invisible');
        });
        let targertEl = 'div.services-info>div.content>div.' + clickedId;
        document.querySelector(targertEl).classList.add('visible');
    });
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 1
@TheOnlyFastCoder2
Поменяйте свой код , на этот
const buttons = document.querySelectorAll('ul.sidebar-menu > li');
const divs = document.querySelectorAll('div.services-info>div.content>div');
buttons.forEach( (btn,i) => {
    btn.onclick = _ => {
        for(let j = divs.length; j--;) {
            const divsName = divs[j].classList[0];
            divsName == btn.id ?
            divs[j].classList.add('visible'):
            divs[j].classList.remove('visible') 
        } 
    }
})
Ответ написан
Ваш ответ на вопрос

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

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