Question

当我将鼠标悬停在面包屑上时，我正试图制作一个100％宽度的3px高度div，并且我失败了。这是脚本：

var menuIsOpen = false;
function bc_MouseOver() {
    if (!menuIsOpen)
    {
        menuIsOpen = true;
        for (var int = 4; int == 20; int++)
        {
            document.getElementById("navmenu").style.height = int + "px";
        }
    }
}

和一些html（使用MVC）：

<body>
    <div id="navigation">
        <ul id="navlist">
            <li class="titleli">
                <a href="/" target="_self" id="titlelink">Some Title</a>
            </li>
            <li class="breadcrumb" onmouseover="bc_MouseOver()">Projects</li>
            <li class="breadcrumb"></li>
        </ul>
    </div>
    <div id="navmenu"> </div>
    <div class="container">
        @RenderBody() 
   </div>
</body>

Answer 1

为什么不使用CSS呢？使用a：hover伪类，或者在悬停时将类应用于具有转换的元素似乎是最好的答案，但是，如果你热衷于JS：

for (var int = 4; int == 20; int++)
{
  document.getElementById("navmenu").style.height = int + "px";
}

这个块是同步的，新的高度不会被应用直到（可能）下一个刻度的结束，因此它只会应用'20px'的高度。

你必须找到一种方法，每个刻度应用1px增加，以确保它已渲染然后打开。 jQuery animate非常有用，可以帮助您节省工作量（并解决任何潜在的跨浏览器问题），但如果您热衷于vanilla JS：

var time = 0;
function bc_mouseOver( i ) {
  var i = i || 4;
   if ( i < 21 ) {
    document.getElementById("navmenu").style.height = int + "px";
    setTimeout( function() {
        bc_mouseOver( i + 1 )
    }, time );
  }
}

您可能必须检查bc_mouseOver是否在范围内，因为setTimeout将在窗口的上下文中运行。使用lodash/underscore defer方法是隐藏setTimeout和上下文移位的好方法，通常会使事情更整洁，更可靠。

您可能还需要更改变量time以获得您想要的内容，我已经在此处执行了0超时以强制它在下一个刻度上但是这可能太快，特别是在某些环境中/平台。

实际上，这可以（可能应该）在几行CSS中完成。

Answer 2

问题在于for循环中的测试条件。它每次都失败并且不执行循环。

将其更改为：

 for (var int = 4; int <= 20; int++) {
        document.getElementById("navmenu").style.height = int + "px";
    }

用javascript改变div的高度

2 个答案: