Тема: Як зробити дію над усіма елементами крім одного?
Маю вертикальне меню з під-менюшками:
<ul>
<label for="checkbox-0"><li class="left-sidebar-menu-main-li" onclick="hideAllSubMenus(0);">Меню 1</label>
<input type="checkbox" id="checkbox-0" class="radio-sub-menu">
<ul class="sub-menu">
<li><a href="#">Під-меню</a></li>
<li><a href="#">Під-меню</a></li>
<li><a href="#">Під-меню</a></li>
<li><a href="#">Під-меню</a></li>
<li><a href="#">Під-меню</a></li>
</ul>
</li>
<label for="checkbox-1"><li class="left-sidebar-menu-main-li" onclick="hideAllSubMenus(1);">Меню 2</label>
<input type="checkbox" id="checkbox-1" class="radio-sub-menu">
<ul class="sub-menu">
<li><a href="#">Під-меню</a></li>
<li><a href="#">Під-меню</a></li>
<li><a href="#">Під-меню</a></li>
<li><a href="#">Під-меню</a></li>
</ul>
</li>
</ul>
І далі в такому ж стилі. За допомогою CSS прибираємо .sub-menu, а потім якщо натиснутий чекбокс, то показуємо:
.sub-menu {
display: none; }
ul input:checked + ul {
display: block; }
Загалом таких під-меню багато і на js спробував зробити скрипт, який буде спрацьовувати при натисканні на прапорець, та прибирати всі інші прапорці. Тобто щоб при відкриванні одного під-меню, закривалися всі інші.
Написав функцію hideAllSubMenus():
function hideAllSubMenus(thisCheckbox) {
var arr = document.getElementsByClassName("radio-sub-menu");
for (var i = 0; i <= document.getElementsByClassName("radio-sub-menu").length - 1; i++) {
if (arr[i] != thisCheckbox) {
arr[i].checked = false;
}
}
}
По моїй логіці ми за допомогою 2 рядку створюємо масив arr[], з усіма чекбоксами. А потім вже перебираємо їх, і порівнюємо: якщо це не той чекбокс який викликав цю функцію - то знімаємо прапорець.
Десь помилку допустив, бо код не працює: чекбокси взагалі не відкриваються. Щось мабуть в логіці коду наплутав. Може хтось тикнути носом? Буду дуже вдячний.