Как я могу отобразить активный список в выпадающем меню

0

Я хочу расширить свой dropdownmenu с помощью этого скрипта.

$(document).ready(function() {

  $('li.active>ul').css('display','block');

  $("ul.parent>li:not(.active)").mouseenter(function(){
    $("ul.parent li.active>ul").css("display","none"); 
  });

  $("ul.parent>li:not(.active)").mouseleave(function(){
    $("ul.parent li.active>ul").css("display","block"); 
  });


  $("ul.level-2>li:not(.active)").mouseenter(function(){
    $("ul.level-2 li.active>ul").css("display","none"); 
  });

  $("ul.level-2>li:not(.active)").mouseleave(function(){
    $("ul.level-2 li.active>ul").css("display","block"); 
  });


});

Он работает, но есть ли более чистые решения, чем это, даже для большего количества уровней?

  • 0
    Можете ли вы показать нам свою разметку?
Теги:
drop-down-menu

1 ответ

1

Возможно, используя hover() - toggle() и parent() но зависит от вашей разметки.

$(document).ready(function() {
    $('li.active-trail>ul').css('display','block');
    $("ul > li:not(.active-trail)").hover(function(){
      $(this).parent().find("li.active>ul").toggle(); 
    });
})
Поделиться
  • 0
    Эй, спасибо за ваш ответ! Это замечательно, но этот скрипт работает для верхнего и 2-го уровня, но не для 3. Если ul имеет на 3. уровне «активный» класс, другие списки уровня 3 перекрывают его.
  • 0
    @ Bruno Привет, поэтому я говорю, зависит от вашей разметки, вы можете показать это? и, возможно, вставить его в jsfidle.net
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню