Закрытие активного окна в меню, при клике в другой области сайта

@MarkebStudio · Регистрация: 11.03.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте, как закрыть окно-меню при клике в другой области сайта

JS

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script>            
var btn = document.querySelector('.btn-cat');
btn.onclick = function(e) {
    var element = document.querySelector(".dropdown-cat-content");
  if(element.classList.contains("show-block")) {
    element.classList.remove("show-block");
      
  } else {
    element.classList.add("show-block");
  }
}
</script>

Открывает меню при клике на ссылку "Каталог товаров", и закрывает также на нее.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="menu-block">
                    <ul>
                        <li class="firstItem dropdown-cat">
                            <a title="Каталог товаров" class="btn-cat"><img src="/assets/site/images/menu/shop(2)(1).svg" alt="">Каталог товаров</a>
    <div class="col-md-12 dropdown-cat-content">
      <div class="row">
        <div class="col-md-12">
            <h2><a href="[~6754~]" class="title-category">Мебель</a></h2>
        </div>
      </div>      
      <div class="row row-flex">
        [[Ditto? &parents=`6754` &tpl=`element`&display=`all` &sortBy=`menuindex` &sortDir=`ASC`]]  
      </div>
        
      <div class="row row-flex">
        <div class="col-md-2 col-sm-3 m-b-15">
          <h2><a href="[~5946~]" class="title-category">Готовые шкафы-купе</a></h2>
          [[Ditto? &parents=`5946` &tpl=`element2`&display=`all` &sortBy=`menuindex` &noResults=` ` &sortDir=`ASC`]]
        </div>
        <div class="col-md-2 col-sm-3 m-b-15">  
          <h2><a href="[~9163~]" class="title-category">Техника для кухни</a></h2>
          [[Ditto? &parents=`9163` &tpl=`element2`&display=`all` &sortBy=`menuindex` &noResults=` ` &sortDir=`ASC`]]
        </div>
        <div class="col-md-2 col-sm-3 m-b-15">  
          <h2><a href="[~19~]" class="title-category">Сантехника</a></h2>
          [[Ditto? &parents=`19` &tpl=`element2`&display=`all` &sortBy=`menuindex` &noResults=` ` &sortDir=`ASC`]]
        </div>
        <div class="col-md-2 col-sm-3 m-b-15">
          <h2><a href="[~9164~]" class="title-category">Ванная</a></h2>
          [[Ditto? &parents=`9164` &tpl=`element2`&display=`all` &sortBy=`menuindex` &noResults=` ` &sortDir=`ASC`]]
        </div>
        <div class="col-md-2 col-sm-3 m-b-15">
          <h2><a href="[~7488~]" class="title-category">Акции</a></h2>
          [[Ditto? &parents=`7488` &tpl=`element2`&display=`all` &sortBy=`menuindex` &noResults=` ` &sortDir=`ASC`]]
        </div>
        <div class="col-md-2 col-sm-3 m-b-15">
          <h2><a href="[~11~]" class="title-category">Скидки</a></h2>
         [[Ditto? &parents=`11` &tpl=`element2`&display=`all` &sortBy=`menuindex` &noResults=` ` &sortDir=`ASC`]]
        </div>
        <div class="col-md-12 col-sm-12 m-b-15 text-right">  
          <a href="[~6~]" class="request-call-cat">Перейти в каталог</a>
        </div>
      </div>

@Mr_Sergo · 18.06.2019, 21:29

MarkebStudio,

JavaScript
1
document.addEventListener('click',() => btn.classList.remove("show-block") );

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/