Question

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

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

如果我们展开关于我们，那么关于我们，第一个应该被折叠。

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

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

Answer 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答案，希望它有效：）

Answer 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

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

Answer 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');
});

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

谢谢各位。

mmenu：一次只展开一个子菜单（slidingSubmenus：false）

3 个答案: