Меню с Collapse BootStrap

Question

Привет, у меня есть кнопка в BootStrap. Я использую «коллапс» в меню, и каждая из этих кнопок, когда я нажимаю это, чтобы свернуть, появляется с какой-либо проблемой.

Но когда я нажимаю еще одну кнопку с этим активным, то появляются на другом.

Как изменить это действие? Когда я нажимаю любую кнопку, это скрывает это, но с той же анимацией, что и коллапс.

Вот код, когда вы попробуете это, вы поймете меня:

<ul class="nav nav-pills"> 
    <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content0a">1<strong class="caret"></strong></a></li> 
    <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content1a">2<strong class="caret"></strong></a></li> 
</ul> 
<div class="clearfix"><p>content more</p></div> 
<div id="content0a" class="collapse"> 
<div class="navbar"> 
    <div class="thumbnail bs-example bullet0a"> 
     <div class="media"> 
      <div class=""> 
       <ul><li> Content...1 </li></ul> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
<div id="content1a" class="collapse"> 
<div class="navbar"> 
    <div class="thumbnail bs-example bullet0a"> 
     <div class="media"> 
      <div class=""> 
       <ul><li> Content...2 </li></ul> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

Попробуйте это.

<script> 
     $(document).ready(function(){ 
      $('.nav-pills a').click(function(){ 
       $('.in').not($(this).data('target')).height(0); 
       $('.in').not($(this).data('target')).removeClass('in'); 
      }); 
     }); 
    </script> 

Вы также можете попробовать это. (Что дает больше коллапса анимации)

<script> 
    $(document).ready(function(){ 
     $('.nav-pills a').click(function(){ 
      $('.in').not($(this).data('target')).collapse('hide'); 
     }); 
    }); 
</script> 

Вы можете добавить его в нижней части страницы, непосредственно перед тегом </body> или добавить его в существующий файла JavaScript.

Попробуйте и сообщите мне, если это близко к тому, что вы хотите.