Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.03.2021, 09:14
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Корректное переключение dropdown
Значся чего хочется добиться. Есть дропдаун'ы. 1 открыли, другие все закрылись. Нажали вне открытого дропдауна - закрылся.

HTML:
<li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="learn" href="#">Учебник <span class="icon-down-open-mini"></span></a>
                            <ul class="list-unstyled drop-menu" id="learn">
                                <li><a class="drop-item" href="#">Видео лекции и вебинары</a></li>
                                <li><a class="drop-item" href="#">Для чтения</a></li>
                                <li><a class="drop-item" href="#">Онлайн-поддержка</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="update" href="#">Обновления <span class="icon-down-open-mini"></span></a>
                            <ul class="list-unstyled drop-menu" id="update">
                                <li><a class="drop-item" href="#">Системные</a></li>
                                <li><a class="drop-item" href="#">Обновление по модулям</a></li>
                                <li><a class="drop-item" href="#">Обновление по документам</a></li>
                            </ul>
                        </li>


Открываю нужный мне dropdown вот так:
$('.show-drop').click(function(){
            var id = $(this).data('drop');
            $('#'+id).fadeIn();
        })


Я понимаю, что для закрывания нужно оперировать через $(document) + e.target, но чет допереть не могу, как корректно построить логику. Помогите пж
Ответить с цитированием
  #2 (permalink)  
Старый 15.03.2021, 10:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,363

закрытие по клику вне блока
shareware,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .drop-menu {
            display: none;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        let prev;
        $(document).click(function(event) {
            let li = $(event.target).closest(".dropdown-show");
            if (li.length) {
                let a = $(event.target).closest(".show-drop")
                if (a.length) {
                    let menu = a.next();
                    if (prev && menu[0] !== prev) $(prev).fadeOut();
                    a.next().fadeToggle();
                    prev = menu[0]
                }
            } else if (prev) $(prev).fadeOut();
        });
    </script>
</head>

<body>
    <li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="learn" href="#">Учебник <span class="icon-down-open-mini"></span></a>
        <ul class="list-unstyled drop-menu" id="learn">
            <li><a class="drop-item" href="#">Видео лекции и вебинары</a></li>
            <li><a class="drop-item" href="#">Для чтения</a></li>
            <li><a class="drop-item" href="#">Онлайн-поддержка</a></li>
        </ul>
    </li>
    <li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="update" href="#">Обновления <span class="icon-down-open-mini"></span></a>
        <ul class="list-unstyled drop-menu" id="update">
            <li><a class="drop-item" href="#">Системные</a></li>
            <li><a class="drop-item" href="#">Обновление по модулям</a></li>
            <li><a class="drop-item" href="#">Обновление по документам</a></li>
        </ul>
    </li>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 15.03.2021, 10:20
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DropDown Menu vanilla js olgamir1997@gmail.com Events/DOM/Window 1 22.01.2019 17:50
Dropdown в Dropdown при клике Timurkin Events/DOM/Window 4 23.08.2017 12:06
Переключение табов (ui tabs) yurashklyaev Библиотеки/Тулкиты/Фреймворки 3 29.08.2016 14:52
Переключение url из списка предыдущая, следующая страница polepropilen Элементы интерфейса 12 05.04.2014 10:36
Появление DropDown... Phil_F Элементы интерфейса 11 13.02.2013 16:51