1

Тема: Як зробити дію над усіма елементами крім одного?

Маю вертикальне меню з під-менюшками:

<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[], з усіма чекбоксами. А потім вже перебираємо їх, і порівнюємо: якщо це не той чекбокс який викликав цю функцію - то знімаємо прапорець.
Десь помилку допустив, бо код не працює: чекбокси взагалі не відкриваються. Щось мабуть в логіці коду наплутав. Може хтось тикнути носом? Буду дуже вдячний. :)

2

Re: Як зробити дію над усіма елементами крім одного?

https://jsfiddle.net/5eeauu50/

Подякували: leofun01, Monolith, 221VOLT3

3

Re: Як зробити дію над усіма елементами крім одного?

koala написав:

https://jsfiddle.net/5eeauu50/

О, точно. Як я не додумався.... Дякую величезне.

4

Re: Як зробити дію над усіма елементами крім одного?

Шкода тільки, що радіокнопка не вимикається коли на неї другий раз клікають.

5

Re: Як зробити дію над усіма елементами крім одного?

misha_bondar_2012 написав:

Шкода тільки, що радіокнопка не вимикається коли на неї другий раз клікають.

Тут вже доведеться JS додавати: https://jsfiddle.net/20qLwzag/2/

Подякували: 221VOLT, Monolith2