JS CSS切换按钮不会向上移动

Question

问题是，我的打开按钮并不想在隐藏后进入最前面。它仍然处于相同的位置！ 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

的按钮保持在相同的位置，因为它没有嵌套在navibar块/部分和，因为它的位置是绝对的。

我猜你想是这样的： https://fiddle.jshell.net/4fs5x0p4/1/

这是脚本：

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

和我说transition: top 0.5s ease-out;到#open风格。 根据自己的喜好微调转场和动画时间。