Começo por dizer que tinha umas "
em falta na sua estrutura de exemplo.
Quanto ao problema em si é mais facil resolver fazendo slideUp
e slideDown
manualmente. Quando clica num elemento faz slideUp
a todos, que só irá afetar aquele que está para baixo e faz slideDown
ao que foi clicado.
Exemplo:
$(".botão").on("click", function(){
$(".sub-item").slideUp();
$(this).next().slideDown();
});
.sub-item {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-item">
<div class="botão">item 1</div>
<div class="sub-item">subitem1</div>
</div>
<div class="menu-item">
<div class="botão">item 2</div>
<div class="sub-item">subitem2</div>
</div>
<div class="menu-item">
<div class="botão">item 3</div>
<div class="sub-item">subitem3</div>
</div>
Se utilizar slideToggle
ao invés de slideDown
irá ter exatamente o mesmo efeito, mas acaba por talvez ser mais confuso porque irá apenas sempre abrir e nunca fechar, logo corresponde sempre apenas a slideDown
.
Como já foi referido em comentários não convem reinventar a roda e o que está a tentar construir já existe e é chamado de acordião. O JQuery UI já tem de facto isso nos plugins deles já contemplando várias configurações possíveis como:
- Ícones personalizados
- Menus colapsaveis
- Sem tamanho automático
- Ordenável
Referência para o JQuery UI Accordion
Accordion
? Exemplo no JQuery UI