Wie man zwischen zwei Klassen wechselt, wenn ein div geklickt wird

Question

Ich versuche, die Klassen von toggle-nav zwischen 2 verschiedenen Klassen hinzuzufügen und zu ändern, wenn auf meine andere div toggle-btn geklickt wird.

Ich brauche die Klassen haben fadeInDown wenn zuerst angeklickt und fadeUpOut, wenn das div geklickt wird wieder unter Verwendung JQuery

Hier ist der Code ich

haben

<script> 
$(document).ready(function() 
{ 
    $('.toggle-btn').click(function() { 
    $(".toggle-nav").toggleClass("fadeInDown "); 

    }); 
    }); 


</script> 

<div class="container"> 
<label class="toggle-btn" for="menu-toggle"> 
<i class="fa fa-bars fa-4x"></i> 
<span>MENU</span> 
</label> 
</div> 

    <input type="checkbox" id="menu-toggle"/> 

    <div id="toggle-bar" class="toggle-nav animated clearfix"> 
     <div class="container"> 
      <div class="nav-sections"> 
       <div class="col-md-4 top-nav-1">item1</div> 
       <div class="col-md-3 top-nav-2">item2</div> 
       <div class="col-md-2 top-nav-3">item3</div> 
       <div class="col-md-3 top-nav-4">item4</div> 
      </div> 
     </div> 
    </div> 

Jede Hilfe wäre genial!

Vielen Dank!

-Issac

Answer 1

Siehe jsfiddle. Aber wäre es nicht einfacher, nur eine Klasse hinzufügen, wenn Sie das Menü angezeigt werden sollen (wie nav-sichtbar) und es ist standardmäßig versteckt machen:

.toggle-nav { 
    height:0; 
    transition: 2s height; 
    overflow:hidden; 
} 
#menu-toggle{ 
    display:none; 
} 
.toggle-nav.fadeInDown { 
    height:100px; 
} 

See this jsfiddle.