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

Question

[Norum]

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

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

Нажал на пункт меню


Нажал на любое пустое пространство

<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');
    });

Comments

[TheOnlyFastCoder2]

Слушай , может перепишешь свой код ? У тебя костыль на костыле , все через одно место .
Если ты новичок , то понимаю тебя . Но советую лучше писать хороший код изначально .
Кст , у меня есть свободное время и не знаю чем его занять , намек на то что я могу тебе помочь с кодом .
Если заинтересовался , то напиши мне на почту .
Предложение в силе 1 день

Answer 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') 
        } 
    }
})

Comments

[Norum]

поменял, но теперь надпись Сайт-визитка висит и не исчезает когда нажимаю на другие пункты меню

[TheOnlyFastCoder2]

Norum, Ну это уже ваша проблема . Вы не правильно сверстали , или что то типа этого .
Если что , мое предложение в силе .

[Norum]

TheOnlyFastCoder2, сверстал я правильно, а вот js код написан неверно