Question

i am trying since days to get this right: the submenus of the jQuery.mmenu shall toggle smoothly and i always would like just one submenu being open at a time. Also i like to keep the feature that if a page opens the current menu element is visible.

I did set up a js fiddle。

也许有人可以给我一个如何应用.next（）选择器的提示 - 如果是这样的话......

我设法创建了幻灯片切换，但它当然切换了所有子菜单：

$(document).ready(function() {
  $(".mm-vertical ul.level2").hide();
  $(".mm-vertical ul.level3").hide();
  $(".level1 a.mm-next").click(function () {
    $(".mm-vertical ul.level2").slideToggle("slow", function () {});
  });
  });

Answer 1

我找到了自己做的方法。不是很优雅或短，但它运作良好，并保持子菜单打开，以防它包含当前菜单项。解决方案限于3个级别。我添加了类＆＃34; level1＆＃34;，＆＃34; level2＆＃34;因为我通过typo3生成菜单的html。

$(".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");



});

Answer 2

$("#menu").mmenu({
        offCanvas: true,
        extensions  : [ "position-right", "listview-50", "fx-panels-slide-up", "fx-listitems-drop", "border-offset" ],
    });

这将有助于向上滑动jQuery mmenus>子菜单

How to toggle the vertical jQuery.mmenu submenus?

2 个答案: