|
186 | 186 |
|
187 | 187 | // ===== Dropdown Click Toggle ===== |
188 | 188 | function initDropdownClick() { |
189 | | - const trigger = document.querySelector('.nav__dropdown-trigger'); |
190 | | - const dropdown = document.querySelector('.nav__dropdown'); |
191 | | - if (!trigger || !dropdown) return; |
192 | | - |
193 | | - trigger.addEventListener('click', function(e) { |
194 | | - e.preventDefault(); |
195 | | - dropdown.classList.toggle('open'); |
| 189 | + const triggers = document.querySelectorAll('.nav__dropdown-trigger'); |
| 190 | + const dropdowns = document.querySelectorAll('.nav__dropdown'); |
| 191 | + if (!triggers.length) return; |
| 192 | + |
| 193 | + triggers.forEach(function(trigger, i) { |
| 194 | + trigger.addEventListener('click', function(e) { |
| 195 | + e.preventDefault(); |
| 196 | + // Close other dropdowns |
| 197 | + dropdowns.forEach(function(d, j) { |
| 198 | + if (j !== i) d.classList.remove('open'); |
| 199 | + }); |
| 200 | + dropdowns[i].classList.toggle('open'); |
| 201 | + }); |
196 | 202 | }); |
197 | 203 |
|
198 | | - // Close on click outside |
| 204 | + // Close on click outside any dropdown |
199 | 205 | document.addEventListener('click', function(e) { |
200 | | - if (!dropdown.contains(e.target)) { |
201 | | - dropdown.classList.remove('open'); |
| 206 | + var clickedInside = false; |
| 207 | + dropdowns.forEach(function(d) { |
| 208 | + if (d.contains(e.target)) clickedInside = true; |
| 209 | + }); |
| 210 | + if (!clickedInside) { |
| 211 | + dropdowns.forEach(function(d) { d.classList.remove('open'); }); |
202 | 212 | } |
203 | 213 | }); |
204 | 214 | } |
|
0 commit comments