gpt4 book ai didi

javascript - 使用javascript更改div的高度

转载 作者:行者123 更新时间:2023-12-03 12:36:37 26 4
gpt4 key购买 nike

当我将鼠标悬停在面包屑上时,我试图使 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com