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样式中。根据自己的喜好微调过渡和动画时间。

JS CSS Toggle Button没有向上移动

1 个答案: