首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么当我点击一个空区域时内容会消失?

为什么当我点击一个空区域时内容会消失?
EN

Stack Overflow用户
提问于 2021-08-04 22:39:57
回答 1查看 55关注 0票数 0

有一个.services部分,其中包含一个带有列表菜单的.sidebar。当您单击菜单中的一个菜单项时。..services info块右侧的侧栏显示与项内容匹配的内容,但有一个问题:当我单击空区域时..services info中的块内容消失。问题是什么?PS我正在使用Swiper进行块的全页面翻转,这是第一个幻灯片块

代码jsfiddle.net/1 ohrf34p/ Site cn76553.tmweb.ru

选定项目

在这里输入图像描述

单击任何空白处

在这里输入图像描述

代码语言:javascript
运行
复制
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');
});
代码语言:javascript
运行
复制
.invisible {
  display: none;
}

.visible {
  display: block;
}
代码语言:javascript
运行
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2021-08-05 00:07:24

这是因为您得到了一个错误: Uncaught :未能在‘文档’上执行'querySelector‘:'div.services-info>div.content>div.’.‘不是有效的选择器。您正在尝试获取元素的id,该元素没有它,除此之外,您还试图通过错误的选择器访问它,使用".idOfElement“而不是"#idOfElement”。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68658709

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档