mmenu: 一次只展开一个子菜单 (slidingSubmenus: false)

Posted 2023-05-08

【中文标题】mmenu: 一次只展开一个子菜单 (slidingSubmenus: false)

【英文标题】：mmenu: expand only one submenu at a time (slidingSubmenus: false)

【发布时间】：2016-02-04 05:14:43

【问题描述】：

我喜欢在我的 Web 项目中使用 mmenu：http://mmenu.frebsite.nl/。我应该设置slidingSubmenus: false，但为了节省垂直空间，我应该自动折叠以前展开的子菜单，如果展开新的子菜单 - 即当时只展开一个子菜单。 这些是客户的要求。

请看一下这个例子：http://plnkr.co/edit/O2CCBYuXtxnHH7wbdqMa?p=preview [1]

如果我们展开About us，然后About us 2，第一个应该折叠起来。

这可以使用本机设置还是使用简单的技巧？ 我还找到了How to toggle the vertical jQuery.mmenu submenus?，但我希望有一个更清洁的解决方案 - 巴德拉

[1] 感谢 ankoehn (https://***.com/users/5174279/ankoehn) 的回答 https://***.com/a/31727879/4106030（这是我的 plunker 的基础 - 我还需要 AngularJS 的解决方案）。

【参考方案1】：

此修订只允许在任何级别一次打开一个子菜单。

$('.mm-next').click(function()
  var myMenu = $(this).closest('.mm-vertical');
  myMenu.parent().children('.mm-vertical').not(myMenu).removeClass('mm-opened');
)

http://plnkr.co/edit/axlVAHBb38boNMoqxJ1D?p=preview （我的第一个 plnkr 和 SO 答案，希望它有效:)

【讨论】：

谢谢多姆。如果您还添加了更新的 plunker（或 jsfiddle 或其他），我会将您的答案设置为已接受。

【参考方案2】：

由于您使用的是 jQuery，您可以添加一些 jQuery 来执行此操作：

jQuery(document).ready(function()
 $('.mm-next').click(function()
   var myMenu = $(this).closest('.mm-vertical');
   $('.mm-vertical').not(myMenu).removeClass('mm-opened');
  )
)

更新 plunker http://plnkr.co/edit/3kr45X8fPnGMo64wXc7j?p=preview

这只是从您打开的当前项目以外的项目中删除打开的类。

【讨论】：

谢谢你，里奥！这很棒。我看到我需要学习一些关于 jQuery 的基础知识...... - 有一个问题，如果我们有子菜单 - 我们不能再打开第 3 级 - 但是，我认为有了更多的 jQuery 知识，我将能够解决此问题。

【参考方案3】：

我正在尝试遵循 Dom 的解决方案，但它在我这边无法正常工作。 请问哪部分不正确。

$('.mm-btn-next').click(function()
  var myMenu = $(this).closest('.mm-listitem_vertical'); 
  myMenu.parent().children('.mm-listitem_vertical').not(myMenu).removeClass('mm-listitem_opened');
);

我在 codepen 上的输出，https://codepen.io/faliqt/pen/vYXpXGW

谢谢大家。