javascript - 为什么在我打开导航栏时所有页面都在移动？

Question

我试图在打开时让导航栏仅导航栏移动，而不是所有页面都像现在这样移动

我的代码如下:-头:

<script src="/js/jquery.js"></script>
<script lang="ja" type="text/javascript">
    var i = 0;
    $(document).ready(function () {
        $("#b").click(function () {
            $("#menu").slideToggle("slow");
        });
    });

    function ToggleMenu(loc) {
        $("#menu").slideToggle("slow");

        setTimeout(function () {
            window.location.href = loc;
        }, 750);
    }
</script>

正文:

<form id="form1" runat="server">
    <img id="b" src="/img/ic_menu_black_48dp_2x.png" style="height: 30px; width: 30px; margin-top: -5px; cursor: pointer;" />
    <div id="menu" style="border: 1px solid black; padding: 8px 8px; display: none; text-align: center; font-size: 20px">
        <a onclick="ToggleMenu('/')" class="navbartxt">Home</a>
        <br />
        <br />
        <a onclick="ToggleMenu('/Account/Register.aspx')" class="navbartxt">Register</a>
        <br />
        <br />
        <a onclick="ToggleMenu('/Account/Login.aspx')" class="navbartxt">Login</a>
    </div>
    <br />
    <br />
    Hello
</form>

当导航栏打开时，“Hello”一词会下降。我希望这个词和页面的其余部分不会改变位置。我正在尝试使用 jquery 执行此操作，但没有成功。

Answer 1

跟定位有关:试试...

<div id="menu" style="border: 1px solid black; padding: 8px 8px; display: none; text-align: center; font-size: 20px; position: absolute; background-color: white;">

注意:position: absolute;背景颜色:白色； 添加。

编辑

fiddle :https://jsfiddle.net/rfornal/wptb8fp3/

编辑 2

设置相对于<form>的宽度正如您在下面询问的那样，设置表单的宽度宽度，您还需要指定 `position: relative;"。

<form id="form1" runat="server" style="width:20%; position:relative;">
  ...
  <div id="menu" style="border: 1px solid black; padding: 8px 8px; display: none; text-align: center; font-size: 20px; position: absolute; background-color: white; width:100%;">

...注意表单上的宽度和位置。