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

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

很多问题都与您的代码有关。

1. 如果您只想在值变为 15 * 2 时对 i 进行计时，为什么要使用 for 循环？
2. onmouseover="handleListById(first)" 应该像这样在 first 周围加上单引号 onmouseover="handleListById('first')"
3. 使用 style.height 时，您必须在末尾附加 "px"。
4. 你不应该得到你只有 1 个的 ul 元素，你应该得到 li。
5. document.getElementById("idname") 应该是 document.getElementById(idname) 不带双引号。
6. 您不应设置object 的高度，而应设置div 中ul 的高度。

试试这个

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')">

不要忘记在鼠标移出时重置高度