JS CSS Toggle Button bewegt sich nicht nach oben

Question

Das Problem ist, meine offene Taste möchte nicht nach dem Ausblenden ganz oben bleiben. Es bleibt in der gleichen Position! https://fiddle.jshell.net/4fs5x0p4/

<script type='text/javascript'>//<![CDATA[ 
    $(function(){ 
    $("#open").toggle(
     function() { 
      $('#navibar').animate({height: "-50px"}); 
     }, 
     function() { 
     $('#navibar').animate({height: "50px"}); 
     } 
    ); 

    });//]]> 

    </script> 
    <div id="navibar"> 
     <nav> 
      <ul> 
       <li><a href="#">WordPress</a> 
        <ul> 
         <li><a href="#">Themes</a></li> 
         <li><a href="#">Plugins</a></li> 
         <li><a href="#">Tutorials</a></li> 
        </ul>   
       </li> 
      </ul> 
     </nav> 
    </div> 
    <div id="open"></div> 

Answer 1

Der Knopf bleibt in der gleichen Position, da sie nicht verschachtelt/Teil des navibar Block wird und weil seine Position ist absolut.

ich Ihnen raten möchte etwas wie folgt aus: https://fiddle.jshell.net/4fs5x0p4/1/

das ist das Skript:

$(function() { 
    $("#open").toggle(
    function() { 
     $('#navibar').animate({ 
     height: "-50px" 
     }, 800); 
     $(this).css("top", "0px"); 
    }, 
    function() { 
     $('#navibar').animate({ 
     height: "50px" 
     }, 500); 
     $(this).css("top", "30px"); 
    } 
); 
}); 

und ich fügte transition: top 0.5s ease-out; Stile #Entfernen. Feinabstimmung des Übergangs und der Animationszeit nach Ihren Wünschen.