Форум

рони · #11 (**permalink**) 08.06.2021, 20:26

13Foch,
на всякий случай, оба варианта и ваш и мой не рассчитаны на большее вложение.

13Foch · #12 (**permalink**) 08.06.2021, 20:29

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

Значит нет никаких циклов совсем

получаться так спасибо

13Foch · #13 (**permalink**) 08.06.2021, 20:32

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

на всякий случай, оба варианта и ваш и мой не рассчитаны на большее вложение.

пока что сделаю так а потом как столкнусь буду думать

13Foch · #14 (**permalink**) 08.06.2021, 20:39

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

на всякий случай, оба варианта и ваш и мой не рассчитаны на большее вложение.

или у вас есть какая то функция которая подходит на все случаи ?

рони · #15 (**permalink**) 08.06.2021, 20:52

13Foch,
примерно так, убираем класс на соседних одного уровня.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
    <style>
        .menu__item {
            position: relative;
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;
        }
        .menu__item.menu__item--active {
            background-color: silver;
        }
        .menu__menu-lvl2 {
            position: absolute;
            display: none;
            top: 100%;
            left: 0;
            box-shadow: 1px 1px 30px 1px silver;
        }
        .menu__item.menu__item--active>.menu__menu-lvl2 {
            display: block;
            color: red;
             background-color: rgba(255, 255, 255, 1);
        }
        ul{
            padding: 0;
        }
        li{
            list-style: none;
        }

    </style>
    <ul class="menu">
        <li class="menu__item">
            <div class="menu__name">item1</div>
            <ul class="menu__menu-lvl2">
                <li class="menu__item"><div class="menu__name">item1.1</div>
            <ul class="menu__menu-lvl2">
                <li>item1__lvl2__item1</li>
                <li>item1__lvl2__item2</li>
                <li>item1__lvl2__item3</li>
            </ul></li>
                <li class="menu__item"><div class="menu__name">item1.2</div>
            <ul class="menu__menu-lvl2">
                <li>item1__lvl2__item1</li>
                <li>item1__lvl2__item2</li>
                <li>item1__lvl2__item3</li>
            </ul></li>
                <li class="menu__item"><div class="menu__name">item1.3</div>
            <ul class="menu__menu-lvl2">
                <li>item1__lvl2__item1</li>
                <li>item1__lvl2__item2</li>
                <li>item1__lvl2__item3</li>
            </ul></li>
            </ul>
        </li>
        <li class="menu__item">
            <div class="menu__name">item2</div>
            <ul class="menu__menu-lvl2">
                <li>item2__lvl2__item1</li>
                <li>item2__lvl2__item2</li>
                <li>item2__lvl2__item3</li>
            </ul>
        </li>
        <li class="menu__item">
            <div class="menu__name">item3</div>
            <ul class="menu__menu-lvl2">
                <li>item3__lvl2__item1</li>
                <li>item3__lvl2__item2</li>
                <li>item3__lvl2__item3</li>
            </ul>
        </li>
        <li class="menu__item">
            <div class="menu__name">item4</div>
        </li>
    </ul>
    <script>
        document.querySelector(".menu").addEventListener("click", function(event) {
            let target = event.target;
            if (target = target.closest(".menu__name")) {
                event.preventDefault();
                let parent = target.parentNode;
                let children = parent.parentNode.children;
                [...children].forEach(el => el.classList[ el === parent ? "toggle" : "remove"]("menu__item--active"))
            }
        });
    </script>
</body>
</html>

13Foch · #16 (**permalink**) 08.06.2021, 21:15

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

примерно так, убираем класс на соседних одного уровня.

понял спасибо еще раз

13Foch · #17 (**permalink**) 08.06.2021, 21:19

а почему мало используете this, смотрю мало его люди используют а мне он очень нравиться, я почти везде где только можно суну this )

ksa · #18 (**permalink**) 08.06.2021, 21:40

Сообщение от 13Foch

а почему мало используете this, смотрю мало его люди используют

Ты напомнил мне старый анекдот...

На светофоре стоит Ламборджини... Рядом останавливается Логан.
Водила Логана делает знаки водиле Ламборджини, де есть вопрос к нему... Водила Ламборджини опускает стекло:
- Что хотел?
- Хотел узнать как тачка?
- Нормальная.
- Не ломается?
- Нет. А в чем проблема?
- Да вот смотрю не особо ее народ покупает...

рони · #19 (**permalink**) 08.06.2021, 21:43

Сообщение от 13Foch

а почему мало используете this,

куда бы его засунуть тут, не подскажите? )))

13Foch · #20 (**permalink**) 08.06.2021, 21:54

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

Ты напомнил мне старый анекдот...

Форум

Справочник

Discord чат

Курсы javascript