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>

当导航栏打开单词＆＃34; Hello＆＃34;下降。我想要这个词，页面的其余部分不会改变位置。我试图用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;">

注意：位置：绝对; background-color：white; 已添加。

修改

小提琴：https://jsfiddle.net/rfornal/wptb8fp3/

编辑2

要设置相对于<form>的宽度，如下所示，宽度设置窗体的宽度，您还需要指定`position：relative;＆＃34;。

<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%;">

...记下表格上的宽度和位置。

Answer 2

这可能是一个CSS问题。在正常情况下，所有DOM元素都创建为块，这意味着它们彼此相邻。默认情况下有一些例外（强制使用＆＃34; display：inline;＆＃34;），例如SPAN元素。

可能发生的事情是您的菜单不是固定或绝对定位元素，这会导致页面的其余部分调整为菜单的大小更改。您可以在此处阅读有关职位类型的更多信息：

http://www.w3schools.com/csSref/pr_class_position.asp

Answer 3

var self = this;

// Mock data...
self.employees = [
    { id: 1, firstName: 'FirstName1', lastName: 'LastName1', photo: 'img/photo1.png', grade: 0, aptitudes: [...], displayAptitudes: false },
    { id: 2, firstName: 'FirstName2', lastName: 'LastName2', photo: 'img/photo2.png', grade: 0, aptitudes: [...], displayAptitudes: false }
];

$scope.calculateAptitudesGrade = function(employeeId) {
    // The overall calculation happen here where I collect all the skills values for the employee.
    ...
};

Here是一个有效的例子。

当我打开导航栏时，为什么所有页面都会移动？

3 个答案: