2

Когда то на одном проекте, второпях написал код для очень запутанной многоуровневой навигации с кучей подменю.

Конкретно этот кусок отвечал за отображение следующего уровня меню с содержанием соответствующим нажатой кнопке. То есть при нажатии на кнопку с одним из классов [".1st", ".2nd", ".3rd"], элемент в другом блоке, например div.1st_list получает класс .active, но если .2nd уже .2nd.active, то сначала у .2nd.active удаляется .active и уже потом div.1st_list получает .active. То есть одновременно активным может быть только один элемент.

       $(function() {
   Sub_menus = [".1st", ".2nd", ".3rd"]

   for (var i = 0; i < Sub_menus.length; i++) {
       (function(sub_item) {
           $("." + sub_item + "_item").click(function() {
              if ($("." + sub_item + "_list.active")[0]) {
                   $(".gne_snd .dynamic_inner>div").removeClass("active");
                   $(".gne_snd").removeClass("active");
                   $(this).removeClass("for_anim");
               } else if ($(".gne_snd.active")[0]) {
                   $(".gne_snd .dynamic_inner>div").removeClass("active");
                   $("." + sub_item + "_list").toggleClass("active");
               } else {
                   $(".gne_snd").toggleClass("active");
                   $("." + sub_item + "_list").toggleClass("active");
               }
           });
       })(Sub_menus[i]);
   }});


Поскольку и JS, и jQuery знаю очень поверхностно, написал как мог.

И собственно, что хочу узнать.
Есть ли более элегантные, может быть эффективные, решения для подобных задач? Как еще можно написать код для такой задачи?

1 ответ 1

-1

Вот более универсальнее код. Написал на скорую руку поэтому есть возможность сделать его еще более лучшим. Все достаточно просто. Если нужно новый выпадающий список просто добавляете классы и все готово. Html и Css на CodePen https://codepen.io/anon/pen/MGNmzY

$(() => {
    $('.dropdown-toggle').hover(function () {
        $('.dropdown-menu--sub').removeClass('active');
        $(this).siblings('.dropdown-menu').addClass('active');
        setTimeout(() => {
           $(this).siblings('.dropdown-menu').removeClass('active');
       }, 5000)
   });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.