且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何切换垂直jQuery.mmenu子菜单?

更新时间:2023-11-17 16:09:10

不是很优雅或短,但它工作得很好,并保持子菜单打开,以防它包含当前菜单项。解决方案限于3个级别。我添加了类level1,level2作为通过typo3生成菜单的html。

I found a way to do it myself. Not very elegant or short but it works well and keeps the submenu open in case it contains the current menu item. the solution is limited to 3 levels. I added the classes "level1", "level2" as i generate the html of the menu via typo3.

$(".mm-vertical ul").hide();
$(".mm-vertical ul.level3").hide();


$(".level1 a.mm-next").on('click', function(){
var element = $(this).parent('li');
if (element.hasClass('mm-opened')) {
    element.find('ul.level2').slideUp("slow", function () {});
    }
    else {
        element.find('ul.level2').slideDown("slow", function () {});
        element.siblings('li').children('ul').slideUp("slow", function () {});
        element.siblings('li').removeClass('mm-opened');
        element.siblings('li').find('li').removeClass('mm-opened');
        element.siblings('li').find('ul').slideUp("slow", function () {});
        }
          });

$(".level2 a.mm-next").on('click', function(){
var element = $(this).parent('li');
if (element.hasClass('mm-opened')) {
    element.find('ul.level3').slideUp("slow", function () {});
    }
    else {
        element.find('ul.level3').slideDown("slow", function () {});
                element.siblings('li').children('ul').slideUp("slow",   function () {});
        element.siblings('li').removeClass('mm-opened');
        element.siblings('li').find('li').removeClass('mm-opened');
        element.siblings('li').find('ul').slideUp("slow", function () {});
        }
          });
 $('.level2.mm-selected').each(function(){
$(this).parent().removeAttr("style");
});
$('.level2.mm-opened').each(function(){
$(this).parent().removeAttr("style");
 var element = $('.level2.mm-opened');
 element.find('ul.level3').removeAttr("style");
 });
$('.level3.mm-selected').each(function(){
$(this).parent().removeAttr("style");
});
$('.level3.mm-opened').each(function(){
$(this).parent().removeAttr("style");



});