Sub menu con Collapse.

[PaoloG]

In questo menù

<ul>
 <li><a href="#"></i> Voce1</a></li>
 <li><a href="#"></i> Voce2</a></li>
 <li><a href="#" class="sub1" data-toggle="collapse" data-target="#sub1"></i>Voce3 (submenù)</a>
   <ul class="collapse" id="sub1">
     <li><a href="#">Prova1</a></li>
     <li><a href="#">Prova2</a></li>
     <li><a href="#">Prova3</a></li>
   </ul>
 <li><a href="#" class="sub2" data-toggle="collapse" data-target="#sub2"></i>Voce4 (submenù)</a>
   <ul class="collapse" id="sub2">
     <li><a href="#">Prova4</a></li>
     <li><a href="#">Prova5</a></li>
     <li><a href="#">Prova6</a></li>
   </ul>
 </li>
</ul>

Sto cercando di implementare questa funzione

$(document).ready(function(){
    $('.sub1').click(function(){
    $('.collapse').collapse('hide');
  });
    $('.sub2').click(function(){
    $('.collapse').collapse('hide');
  });
});

Cliccando su sub1 lo apre e mi chiude sub2 se aperto e viceversa.

Funziona solo dal 3 click, inizialmente cliccando su un menù mi apre anche l’altro e cliccando di nuovo su un menù me li chiude entrambi, poi funziona.

Mi sa che ci manca qualcosa, ma cosa?