当我将鼠标悬停在面包屑上时，我试图使 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>
最佳答案
为什么不使用 CSS 来实现此目的？使用 :hover 伪类，或者将悬停时的类应用到具有转换的元素似乎是最好的答案，但是，如果您热衷于 JS:
for (var int = 4; int == 20; int++)
{
document.getElementById("navmenu").style.height = int + "px";
}
此 block 是同步的，直到(可能)下一个刻度结束时才会应用新的高度，因此它将简单地应用“20px”的高度。
您必须找到一种方法，每次勾选应用增加 1px，以确保它已渲染并打开。 jQuery animate对于让您解决所有问题(并解决任何潜在的跨浏览器问题)非常有用，但如果您热衷于普通 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 来完成。
关于javascript - 使用javascript更改div的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23710150/