如何切换垂直 jQuery.mmenu 子菜单?
How to toggle the vertical jQuery.mmenu submenus?
我几天以来一直在努力做到这一点:
jQuery.mmenu 的子菜单应该平滑切换,我总是希望一次只打开一个子菜单。我也喜欢保留这样的功能,即如果页面打开,当前菜单元素是可见的。
我确实在这里设置了一个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 () {});
});
});
我找到了自己做的方法。不是很优雅或简短,但它工作得很好,并保持子菜单打开,以防它包含当前菜单项。该解决方案仅限于 3 个级别。我添加了 类 "level1", "level2" 因为我通过 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");
});
$("#menu").mmenu({
offCanvas: true,
extensions : [ "position-right", "listview-50", "fx-panels-slide-up", "fx-listitems-drop", "border-offset" ],
});
这将有助于向上滑动jQuery mmenus > submenus
我几天以来一直在努力做到这一点: jQuery.mmenu 的子菜单应该平滑切换,我总是希望一次只打开一个子菜单。我也喜欢保留这样的功能,即如果页面打开,当前菜单元素是可见的。
我确实在这里设置了一个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 () {});
});
});
我找到了自己做的方法。不是很优雅或简短,但它工作得很好,并保持子菜单打开,以防它包含当前菜单项。该解决方案仅限于 3 个级别。我添加了 类 "level1", "level2" 因为我通过 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");
});
$("#menu").mmenu({ offCanvas: true, extensions : [ "position-right", "listview-50", "fx-panels-slide-up", "fx-listitems-drop", "border-offset" ], });
这将有助于向上滑动jQuery mmenus > submenus