javascript - jQuery slideToggle 菜单在打开/关闭之前折叠同级菜单

Question

这是我正在处理的粗略示例：http: //jsfiddle.net/dX2ux/1/

客户内部开发的 CMS 使用这种 HTML 结构动态创建菜单。它还附带示例中显示的 jQuery 脚本。

我想编辑脚本，以便在它自己打开之前关闭它的兄弟打开的菜单。该类show也必须切换。

到目前为止，我想出了这个：http: //jsfiddle.net/dX2ux/2/

但是，如果您使用它，当您单击其中一个子菜单时，它会搞砸。

任何人都可以阐明我如何实现我的目标行为吗？另外，这是最好的方法吗？这是我想太多了吗？

任何帮助表示赞赏。谢谢你。

Answer 1

不确定这本身是否是“最佳”方式，但有了这种标记，这个解决方案应该可以工作：

$('.toggle-menu').on('click',function(e){
    e.preventDefault();
    $(this).parent().siblings().children('.toggle-menu').removeClass('show').next().slideUp();
    $(this).toggleClass('show').next().slideToggle();
});

编辑您的小提琴以显示效果：http: //jsfiddle.net/dX2ux/3/