JS CSS切换按钮没有'不要向上移动

JS CSS Toggle Button doesn't move up

本文关键字：移动 CSS 按钮 JS      更新时间：2023-09-26

问题是，我的打开按钮在隐藏后不想在顶部。它保持不变！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>

按钮保持在同一位置，因为它不是嵌套/导航栏块的一部分，并且它的位置是绝对的。

我猜你想要这样的东西：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");
    }
  );
});

并且我将CCD_ 1添加到#打开样式中。根据您的喜好微调过渡和动画时间。

相关文章：