Question

我有这个问题：我使用this教程来创建这个非常好的紧凑导航菜单，但它有一个问题，你必须硬编码高度。我想，作为JS中的一个练习，尝试通过在JS中根据迭代器值设置高度来尝试绕过它，该迭代器值在元素中找到列表并遍历井中的所有列表元素然后我基于该迭代器分配高度（每个列表元素具有15px的空间）。

这是我的代码：

/* Input the current nav menu element id here. Should be unordered. */
function handleListById(idname) {
    var object = document.getElementById(idname);
    var list = object.getElementsByTagName("li");
    for (var i = 0, length = list.length; i < length; i++ ) {
        object.getElementsByTagName("ul")[0].style.height = 15*i + "px";
    }
}

然后我尝试用

解雇它

<div class="menu-item" id="first" onmouseover="handleListById('first')">

但它不起作用。我怀疑它与CSS中的事实有关，我用:hover指定改变的高度;而在这里根本不存在。但那我该怎么办？我必须使用jQuery吗？

请不要注意不必要的变量和东西，这是为了帮助自己学习。

Answer 1

在动态构建高度时需要指定“px”。

object.style.height = (15*1) + 'px';

您的onmouseover属性中也存在一个问题，即传入未定义的变量而不是字符串。使用handleListById('first')作为我上面的答案指定

Answer 2

<div class="menu-item" id="first" onmouseover="handleListById('first');">

而不是`handleListById（first）

另外，请使用object.style.height = (15*i) + 'px';

Answer 3

许多问题与您的代码有关。

为什么在价值变为i时只想15 * 2时间时使用for循环？
onmouseover="handleListById(first)"应该在first周围使用单引号onmouseover="handleListById('first')"
使用style.height时，您必须在最后添加"px"。
您不应该获得只有1的ul元素，而应该获得li。
document.getElementById("idname")应为document.getElementById(idname)，不得双引号。
您不应设置object的高度，而是应在ul内设置div的高度。

试试这个

function handleListById(idname) {
    var object = document.getElementById(idname);
    var list   = object.getElementsByTagName('ul');
    var items  = object.getElementsByTagName('li');
    var height = 0;
    for (var i = 0; i < items.length; i++ ) {
        height += items[i].clientHeight
    }
    list[0].style.height = height + "px";
}

HTML

<div class="menu-item" id="first" onmouseover="handleListById('first')">

不要忘记在mouseout上重置高度

DOM：如何根据迭代器值设置元素宽度并在鼠标悬停时调用函数？

3 个答案: