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/