0

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

Весь код jsfiddle.net/1ohrf34p/

Сам сайт cn76553.tmweb.ru

Нажал на пункт меню введите сюда описание изображения

Нажал на пустое место введите сюда описание изображения

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');
    });
.invisible {
    display: none;
}
 
.visible {
    display: block;
}
<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>

2 ответа 2

1

Пропадает, потому что при клике на пустую область вот эта строка let clickedId = e.target.parentNode.id; ничего не получает и соответственно далее ничего не выводится.

Оберните Ваше действие по клику в условие if (e.target.tagName == 'A'){}

document.querySelector('ul.sidebar-menu').addEventListener("click", function(e) {
    e.preventDefault();
    if (e.target.tagName == 'A'){
      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');
   }
});
1
  • Сработало! А как сделать так, чтобы работало не только на нажатию по ссылке, но и по li, в котором находится ссылка?
    – Toppy
    5 авг 2021 в 13:47
0

Вы вешаете прослушиватель события click на весь sidebar-menu. Но пользователь может кликнуть: по ссылке (<a></a>), по элементу в списке (<li></li>) и по самому списку (<ul></ul>)

document.querySelector('ul.sidebar-menu').addEventListener("click", function(e) {...})

let clickedId = e.target.parentNode.id; Здесь вы предполагаете, что пользователь нажимает на ссылку. Как я сказал выше, в зависимости от вашего кода может быть больше вариантов поведения.

Попробуйте сделать так:

const sMenu = document.querySelectorAll('ul.sidebar-menu li');

for (let sMenuItem of sMenu) {
    sMenuItem.addEventListener("click", function(e) {
      e.preventDefault();
      let clickedId = e.target.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');
    })
}

И у ссылок в пунктах меню добавить стиль ul.sidebar-menu li a {pointer-events: none;}

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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