menù jQuery slideToggle che crolla di pari livello i menu prima di apertura/chiusura in sé

Question

Ecco un esempio rudimentale di quello che ho a che fare con: http://jsfiddle.net/dX2ux/1/

in-house sviluppato CMS di un cliente crea dinamicamente i menu che utilizzano questa struttura HTML. Inoltre viene fornito con lo script jQuery che viene mostrato nell'esempio.

Desidero modificare lo script in modo che chiuda i menu aperti del fratello prima che si apra. La classe show deve essere attivata.

Finora, mi è venuta in mente questo: http://jsfiddle.net/dX2ux/2/

Ma se si gioca con esso, le viti quando si fa clic uno dei menu secondari.

Qualcuno può far luce su come potrei raggiungere il comportamento che sto puntando? Inoltre, è questo il modo migliore per farlo? Sto pensando troppo a questo?

Qualsiasi aiuto è apprezzato. Grazie.

Answer 1

Non realmente sicuro se questo è il modo "migliore" di per sé, ma con quel tipo di marcatura, questa soluzione dovrebbe funzionare:

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

modificato il violino per mostrare l'effetto: http://jsfiddle.net/dX2ux/3/