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

@trofey2 · Регистрация: 28.12.2015

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

CSS
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Podia</title>
<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;  
    }
    body {
        background-color: #A5C8D8;
    }
    .main-menu {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
    }
    .secondary-menu {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
        padding-right: 10px;
    }
    .logo {
        width: 80px;
        height: 40px;
        padding-left: 10px;
    }
    h1 {
        font-size: 18px;
    }
    .sign-up-button {
        background-color: black;
        color: white;
        padding: 5px 10px;
        border: 0px;
        border-radius: 7px;
    }
    .sign-up-button:hover {
        background-color: #E1EDF2;
        color: black;
    }
    .button {
        background-color: #A5C8D8;
        color: black;
        border: 0px;
        padding: 5px 10px;
        font-size: 16px;
    }
    .button:hover {
        background-color: #E1EDF2;
        padding: 5px 10px;
        border-radius: 7px;
    }
    .dropbtn {
        background-color: #A5C8D8;
        color: black;
        border: 0px;
        padding: 5px 10px;
        font-size: 16px;
    }
    .dropbtn:hover, .dropbtn:focus {
        background-color: #E1EDF2;
        padding: 5px 10px;
        border-radius: 7px;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        width: 150px;
        height: 250px;
        background-color: black;
        top: 60px;
        left: 310px;
        z-index: 1;
    }
    .dropdown.active .dropbtn {
        background-color: #1d587e;
    }
    .dropdown.active .dropdown-content {
        display: block;
    }
    .show {
        display: block;
    }
    .dropdown-content a {
        display: flex;
        flex-direction: column;
        color: white;
    }
</style>
</head>
<body>
    <nav class="main-menu">
        <img src="img/logo.svg" class="logo">
        <button onclick="" class="button">Website</button>
        <button onclick="" class="button">E-mail</button>
        <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Online store</button></div>
            <div id="myDropdown" class="dropdown-content">
                <a href="#">Ссылка 1</a>
                <a href="#">Ссылка 2</a>
                <a href="#">Ссылка 3</a>
            </div>
        </div>
        <button onclick="" class="button">Switch to Podia</button>
        <button onclick="" class="button">Pricing</button>
    
        <nav class="secondary-menu">
            <button onclick="" class="button">Login</button>
            <button onclick="" class="sign-up-button">Sign up free</button>
        </nav>
    </nav>
    <script>
        function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
        }
    </script>
  
    <script>
        window.addEventListener('click', (event) => {
            let dropdowns = Array.from(document.querySelectorAll('.dropdown.active'));
            let current = event.target.closest('.dropdown');
 
            if (current) {
                dropdowns = dropdowns.filter(el => el !== current);
            }
 
            dropdowns.forEach(el => el.classList.remove('active'))
        })
    </script>
    </body>
</html>

@voraa · 15.02.2026, 08:46

Сообщение от sad67man

Но мне все-равно кажется это нестандартным поведением.

Меню в вебе во многом имитируют свое классическое назначение и поведение, которое пришло из десктопных приложений с графическим интерфейсом. Там меню - просто список действий. При клике на действие - закрыть и выполнить (пустого пространства в открывающемся подменю нет). А всякие поиски и прочие сложные действия, требующие взаимодействия с пользователем открываются в отдельных окнах. Это некий стандарт. Конечно веб дает гораздо больше возможностей, много чего можно нагородить. Но есть понятие - пользовательский опыт. Есть некий стандарт, к которому пользователь привыкает. И когда что то сделано по другому, не как у всех это вызывает неудобство и раздражение. Я в таких случаях желаю разработчику купить машину с нестандартным расположением педалей газа и тормоза и прочих органов управления.

Но и само меню в html делается обычно с <UL> - <LI>

krvsa · 15.02.2026, 10:30

Сообщение от sad67man

Разве можно рассуждать такими категориями, что вот и там и там есть метод forEach?

Конечно можно.

Зачем делать лишнее, когда оно может быть не нужно.

Добавлено через 1 минуту

Сообщение от sad67man

Да согласен, что код не лишен недостатков, но нельзя сказать, что он неправильный, он просто сильно упрощен для автора..

Т.е. про такое можно рассуждать?

@Камиль16 · 15.02.2026, 11:10

Сообщение от krvsa

Конечно можно.
Зачем делать лишнее, когда оно может быть не нужно.

Можно... Но зачем?)))

@sad67man · 15.02.2026, 18:23

Сообщение от krvsa

Зачем делать лишнее, когда оно может быть не нужно.

Это нарушение логики - закона тождества. Вот потом и получаем, что получаем)

Добавлено через 51 минуту

Сообщение от voraa

Меню в вебе во многом имитируют свое классическое назначение и поведение, которое пришло из десктопных приложений с графическим интерфейсом. Там меню - просто список действий. При клике на действие - закрыть и выполнить (пустого пространства в открывающемся подменю нет). А всякие поиски и прочие сложные действия, требующие взаимодействия с пользователем открываются в отдельных окнах. Это некий стандарт. Конечно веб дает гораздо больше возможностей, много чего можно нагородить. Но есть понятие - пользовательский опыт. Есть некий стандарт, к которому пользователь привыкает. И когда что то сделано по другому, не как у всех это вызывает неудобство и раздражение. Я в таких случаях желаю разработчику купить машину с нестандартным расположением педалей газа и тормоза и прочих органов управления.

Тут я с вами полностью согласен. Вот только именно ваш вариант непривычный.

Посмотрите как в windows работает контекстное меню. Там есть пространства куда можно кликнуть. Есть неактивные пункты меню, разделители разделов - есть дополнительная вложенность. В выпадающем меню может быть скролл, да и вообще множество доп. элементов интерфейса. Посмотрите как работает обычный select, как работают выпадающее меню на текущем сайте...

Ваш вариант менее универсальный. К примеру текущий код от автора был предоставлен для меню, у которого была вложенность.

krvsa · 15.02.2026, 18:39

Сообщение от sad67man

Это нарушение логики - закона тождества.

Я на всякий случай загуглил...

Закон тождества — принцип постоянства, или принцип сохранности предметного и смыслового значений суждений (высказываний)...

У меня сохраняется тот самый "принцип сохранности предметного и смыслового значений суждений".
Как работал с неким набором аля массив - так и работаю.

@voraa · 15.02.2026, 19:21

Сообщение от sad67man

Посмотрите как в windows работает контекстное меню. Там есть пространства куда можно кликнуть. Есть неактивные пункты меню, разделители разделов - есть дополнительная вложенность. В выпадающем меню может быть скролл, да и вообще множество доп. элементов интерфейса.

Ну да. Тут согласен. Нынешние меню стали сложнее.
Добавим 4 строчки, что бы меню не закрывалось при клике на нем

PHP/HTML
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Podia</title>
<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;  
    }
    body {
        background-color: #A5C8D8;
    }
    .main-menu {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
    }
    .secondary-menu {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
        padding-right: 10px;
    }
    .logo {
        width: 80px;
        height: 40px;
        padding-left: 10px;
    }
    h1 {
        font-size: 18px;
    }
    .sign-up-button {
        background-color: black;
        color: white;
        padding: 5px 10px;
        border: 0px;
        border-radius: 7px;
    }
    .sign-up-button:hover {
        background-color: #E1EDF2;
        color: black;
    }
    .button {
        background-color: #A5C8D8;
        color: black;
        border: 0px;
        padding: 5px 10px;
        font-size: 16px;
    }
    .button:hover {
        background-color: #E1EDF2;
        padding: 5px 10px;
        border-radius: 7px;
    }
    .dropbtn {
        background-color: #A5C8D8;
        color: black;
        border: 0px;
        padding: 5px 10px;
        font-size: 16px;
    }
    .dropbtn:hover, .dropbtn:focus {
        background-color: #E1EDF2;
        padding: 5px 10px;
        border-radius: 7px;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        width: 150px;
        height: 250px;
        background-color: black;
        top: 3em;
        z-index: 1;
    }
    .dropdown.active .dropbtn {
        background-color: #1d587e;
    }
    .dropdown.active .dropdown-content {
        display: block;
    }
    .show {
        display: block;
    }
    .dropdown-content a {
        display: flex;
        flex-direction: column;
        color: white;
    }
</style>
</head>
<body>
    <nav class="main-menu">
        <img src="img/logo.svg" class="logo">
        <button onclick="" class="button">Website</button>
        <button onclick="" class="button">E-mail</button>
        <div class="dropdown">
            <button class="dropbtn">Online store 1</button>
            <div  class="dropdown-content">
                <a href="#11">Ссылка 1.1</a>
                <a href="#12">Ссылка 1.2</a>
                <a href="#13">Ссылка 1.3</a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">Online store 2</button>
            <div  class="dropdown-content">
                <a href="#21">Ссылка 2.1</a>
                <a href="#22">Ссылка 2.2</a>
                <a href="#23">Ссылка 2.3</a>
            </div>
        </div>
        <button onclick="" class="button">Switch to Podia</button>
        <button onclick="" class="button">Pricing</button>
    
        <nav class="secondary-menu">
            <button onclick="" class="button">Login</button>
            <button onclick="" class="sign-up-button">Sign up free</button>
        </nav>
    </nav>
    <script>
    
      function dropbtnClickHandler(ev) {
            const activeDiv = document.querySelector('.dropdown.active');
            const currentDiv = ev.target.closest('.dropdown');
            activeDiv?.classList.remove('active');
            currentDiv.classList.toggle('active', activeDiv !== currentDiv);
            
            document.addEventListener('click', function me (ev) {
                const activeDiv = document.querySelector('.dropdown.active');
                if (ev.target.closest('.dropdown') !== currentDiv) {
                    activeDiv?.classList.remove('active');
                    document.removeEventListener('click', me, true);
                }
            }, true);
        }
        
        for (const btn of document.querySelectorAll('.dropbtn'))
            btn.addEventListener('click', dropbtnClickHandler);    </script>    
</body>
</html>

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

Как ваш код решает эту проблему?

@sad67man · 16.02.2026, 00:12

Сообщение от voraa

Добавим 4 строчки, что бы меню не закрывалось при клике на нем

В принципе вы сейчас пытаетесь написать ровно мой код, только не выделяя явно операции open close и outHandler, а разруливая дополнительными проверками. Это просто разные подходы, но у вас остается недочет, что если несколько раз жать на кнопку открытия меню, то навестится несколько обработчиков. Такой код становится более запутанным и сложнее поддерживать.

Сообщение от voraa

Как ваш код решает эту проблему?

Ну первое что бросается в голову - добавить отдельный класс (либо по какому-нибудь другому селектору), при клике на который меню будет закрываться. При моем подходе это сделать очень легко.

JavaScript
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
function Dropdown(dropdown) {
    
    this.open = () => {
        dropdown.classList.add('active');
        document.addEventListener('click', this.outHanler);
    }
 
    this.close = () => {
        dropdown.classList.remove('active');
        document.removeEventListener('click', this.outHanler);
    }
 
    this.toggle = () => {
        if (dropdown.classList.contains('active')) {
            this.close();
        } else {
            this.open();
        }
    }
 
    this.outHanler = (event) => {
        if (!dropdown.contains(event.target)) {
            this.close();
        }
    }
 
    dropdown.querySelector('.dropbtn').addEventListener('click', this.toggle)
    dropdown.querySelectorAll('.js-close').forEach(el => el.addEventListener('click', this.close));
}
 
document.querySelectorAll('.dropdown').forEach(el => new Dropdown(el));

HTML5
1
2
3
4
5
6
7
8
 <div class="dropdown">
            <button class="dropbtn">Online store 1</button>
            <div  class="dropdown-content">
                <a href="#11" class="js-close">Ссылка 1.1</a>
                <a href="#12">Ссылка 1.2</a>
                <a href="#13">Ссылка 1.3</a>
            </div>
        </div>

Все-таки якори редко используют и при необходимости это можно разрулить.

Добавлено через 4 часа 10 минут

Сообщение от krvsa

У меня сохраняется тот самый "принцип сохранности предметного и смыслового значений суждений".
Как работал с неким набором аля массив - так и работаю.

Закон нарушается - когда вы начинаете отождествлять разные вещи. Или подменяете понятия.

NodeList коллекция и массив - это разные вещи. И в дальнейшем из-за этого могут возникнуть проблемы.

Допустим логика усложняется, нужно добавить еще несколько строчек кода.. И я предполагая, что работаю с массивом - буду работать как с массивом (или наоборот). Даже не зная что при определенных сценариях там вовсе и не массив.. К чему это может привести вы сами можете додумать. В лучшем случае мне все равно придется код переписать приведя к единому типу.

Это можно отнести и к нарушению SOLID, как неправильное выделение абстракции, т.е. некорректное обобщение некого множества.

Конечно все зависит по какому принципу мы обобщаем - если мы обобщали по принципу некого итерируемого объекта - то это имело бы смысл, если бы мы их подставляли в некую функцию, которая ожидает итерируемую сущность.

Но обычно принято, что если по ходу исполнения меняется тип - то мы обязаны выделить для него другую переменную.

Если вы видите некую переменную - то можете посмотреть выше по коду где она объявлялась и не обязаны прослеживать всю логику, чтоб понять что там находится. Это просто лучшие практики.

krvsa · 16.02.2026, 11:49

Сообщение от sad67man

Закон нарушается - когда вы начинаете отождествлять разные вещи. Или подменяете понятия.

Ты уже дюже начал давить.

Речь-то все еще идет про тот маленький кусочек кода и не более того.
А ты уже натянул на меня всю ответственности мира!

@voraa · 24.02.2026, 08:24

Во! Вариант с минимальным js

PHP/HTML
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Podia</title>
<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;  
    }
    body {
        background-color: #A5C8D8;
    }
    .main-menu {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
    }
    .secondary-menu {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
        padding-right: 10px;
    }
    .logo {
        width: 80px;
        height: 40px;
        padding-left: 10px;
    }
    h1 {
        font-size: 18px;
    }
    .sign-up-button {
        background-color: black;
        color: white;
        padding: 5px 10px;
        border: 0px;
        border-radius: 7px;
    }
    .sign-up-button:hover {
        background-color: #E1EDF2;
        color: black;
    }
    .button {
        background-color: #A5C8D8;
        color: black;
        border: 0px;
        padding: 5px 10px;
        font-size: 16px;
    }
    .button:hover {
        background-color: #E1EDF2;
        padding: 5px 10px;
        border-radius: 7px;
    }
    .dropbtn {
        background-color: #A5C8D8;
        color: black;
        border: 0px;
        padding: 5px 10px;
        font-size: 16px;
    }
    .dropbtn:hover, .dropbtn:focus {
        background-color: #E1EDF2;
        padding: 5px 10px;
        border-radius: 7px;
    }
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        position: absolute;
        width: 150px;
        height: 250px;
        top: 3em;
        justify-self: anchor-center;
        background-color: black;
    }
    .dropdown:has(.dropdown-content:popover-open) .dropbtn {
        background-color: #1d587e;
    }
    .dropdown-content a {
        display: flex;
        flex-direction: column;
        color: white;
    }
</style>
</head>
<body>
    <nav class="main-menu">
        <img src="img/logo.svg" class="logo">
        <button onclick="" class="button">Website</button>
        <button onclick="" class="button">E-mail</button>
        <div class="dropdown">
            <button class="dropbtn" popovertarget="smn1" popovertargetaction="toggle">Online store 1</button>
            <div id="smn1" popover class="dropdown-content">
                <a href="#11">Ссылка 1.1</a>
                <a href="#12">Ссылка 1.2</a>
                <a href="#13">Ссылка 1.3</a>
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn" popovertarget="smn2" popovertargetaction="toggle">Online store 2</button>
            <div id="smn2" popover class="dropdown-content">
                <a href="#21">Ссылка 2.1</a>
                <a href="#22">Ссылка 2.2</a>
                <a href="#23">Ссылка 2.3</a>
            </div>
        </div>
        <button onclick="" class="button">Switch to Podia</button>
        <button onclick="" class="button">Pricing</button>
    
        <nav class="secondary-menu">
            <button onclick="" class="button">Login</button>
            <button onclick="" class="sign-up-button">Sign up free</button>
        </nav>
    </nav>
 
    <script>    
    document.querySelector('nav.main-menu').addEventListener('click', (ev) => {
        const pop = ev.target.closest('.dropdown-content');
        pop?.hidePopover();
    })   
</script>    
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
[golang] Конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. alhaos 10.06.2026 Задача Реализовать конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. Сигнатура func Fetch(urls string, maxConcurrent int) Result Пример urls :=. . .	[golang] Состояние гонки (race condition) alhaos 10.06.2026 Состояние гонки (race condition) Состояние гонки (Race Condition) — это ошибка, возникающая при одновременном доступе нескольких горутин к одним и тем же данным без должной синхронизации. При этом. . .	Взрослые отношения, и почему они не получаются kumehtar 09.06.2026 Когда в детстве ребёнок не получает от родителей чего-то важного, он лишается не просто приятных переживаний, а основы для формирования определённых внутренних качеств и навыков. Если ребёнок не. . .	[golang] Worker Pool alhaos 09.06.2026 Worker Pool Worker Pool — паттерн конкурентной обработки задач в Go. Суть: фиксированное количество горутин-воркеров читают задачи из общего канала и пишут результаты в общий канал результатов. . . .
[golang] Pipeline alhaos 08.06.2026 Pipeline Pipeline — паттерн конкурентной обработки данных в Go. Суть: данные проходят через цепочку независимых стадий, каждая из которых работает в своей горутине и общается с соседями через. . .	Свет внутри себя kumehtar 07.06.2026 Пусть это будет здесь lIs4oanZS9Y	Программа для com-порта Uhbif79 05.06.2026 Всем привет, давно хотел изучить Qt, начинал, бросал, потом снова начинал. И сейчас вот смог написать свою первую программу. До этого имел опыт программирования микроконтроллеров, писал прошивки на. . .	Транскрипция 55-минутного видео через Whisper: WhisperDesktop облажался, спас Google Colab[ anaschu 01.06.2026 Понадобилось получить текст из свежезагруженного видео на YouTube. Казалось бы, задача на пять минут. Заняла полтора часа. Делюсь опытом — может кому пригодится последовательность решений. . . .