Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.06.2021, 20:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

13Foch,
на всякий случай, оба варианта и ваш и мой не рассчитаны на большее вложение.
Ответить с цитированием
  #12 (permalink)  
Старый 08.06.2021, 20:29
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от ksa
Значит нет никаких циклов совсем
получаться так спасибо
Ответить с цитированием
  #13 (permalink)  
Старый 08.06.2021, 20:32
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от рони
на всякий случай, оба варианта и ваш и мой не рассчитаны на большее вложение.
пока что сделаю так а потом как столкнусь буду думать
Ответить с цитированием
  #14 (permalink)  
Старый 08.06.2021, 20:39
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от рони
на всякий случай, оба варианта и ваш и мой не рассчитаны на большее вложение.
или у вас есть какая то функция которая подходит на все случаи ?
Ответить с цитированием
  #15 (permalink)  
Старый 08.06.2021, 20:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

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>
Ответить с цитированием
  #16 (permalink)  
Старый 08.06.2021, 21:15
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от рони
примерно так, убираем класс на соседних одного уровня.
понял спасибо еще раз
Ответить с цитированием
  #17 (permalink)  
Старый 08.06.2021, 21:19
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

а почему мало используете this, смотрю мало его люди используют а мне он очень нравиться, я почти везде где только можно суну this )
Ответить с цитированием
  #18 (permalink)  
Старый 08.06.2021, 21:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,319

Сообщение от 13Foch
а почему мало используете this, смотрю мало его люди используют
Ты напомнил мне старый анекдот...

На светофоре стоит Ламборджини... Рядом останавливается Логан.
Водила Логана делает знаки водиле Ламборджини, де есть вопрос к нему... Водила Ламборджини опускает стекло:
- Что хотел?
- Хотел узнать как тачка?
- Нормальная.
- Не ломается?
- Нет. А в чем проблема?
- Да вот смотрю не особо ее народ покупает...
Ответить с цитированием
  #19 (permalink)  
Старый 08.06.2021, 21:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

Сообщение от 13Foch
а почему мало используете this,
куда бы его засунуть тут, не подскажите? )))
Ответить с цитированием
  #20 (permalink)  
Старый 08.06.2021, 21:54
Интересующийся
Отправить личное сообщение для 13Foch Посмотреть профиль Найти все сообщения от 13Foch
 
Регистрация: 08.06.2021
Сообщений: 21

Сообщение от ksa
Ты напомнил мне старый анекдот...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Убрать боковое меню при клике не по меню Oleg0 Элементы интерфейса 2 21.08.2017 20:07
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 14:24
Несколько пунктов меню, отображение содержимого при клике chelfenix jQuery 3 10.04.2015 16:52
Выделение при клике на элемент haacki jQuery 2 16.03.2014 12:56
Dropdown, выпадающее меню при клике moslem jQuery 2 22.07.2013 16:20