javascript - 使用 JavaScript 更改 CSS 的问题

Question

我正在为我正在进行的元素构建下拉菜单，但遇到了一些麻烦。它的构建使得每个子菜单的宽度和 style.left 由一个 JavaScript 函数设置，当悬停根级菜单项时调用该函数。当我悬停这些菜单项时，它看起来像这样:

子菜单明显偏左了一些像素。如果我不更改子菜单的style.left，我将得到以下内容:

这里对齐是正确的。该故障在 Windows 7 和 Linux 的 Mozilla Firefox 和 Google Chrome 中都出现过，因此它不是平台相关的故障。

这是产生错误的代码:

menu.js

function show_sub_menu(cath){
    var menu_item = document.getElementById(cath)    //cath is an integer passed to the function
    var m_width = Math.floor(window.innerWidth*0.7*0.2);  //Menu is 70% of window, each item is 20% of menu
    menu_item.style.left = cath*m_width;  //Set the style.left dynamically depending on what menu item is to be displayed
                                          //This last line of code produces the error
}

菜单.css

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:20%;
    top:30px;
}

#menu div a{
    position:relative;
    display:block;
    padding:5px;
}

菜单.htm

<div id=m_wrapper>
    <ul id=menu>
        <li onMouseOver=show_sub_menu('0')>Item 1</li>
            <div id=0 onMouseOver=show_sub_menu('0')>
                <a href=#>Item 1.1</a>
                <a href=#>Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

这似乎很不合逻辑，因为对于我的屏幕设置，.js 中的 m_width 是 235px 而 m_width*cath 是 0。我对 JavaScript 相当陌生, 非常感谢您的帮助!

Answer 1

首先，您的列表项提前关闭，并且 ID 不应以数字开头。所以让我们清理一下:

<div id="m_wrapper">
    <ul id="menu">
        <li onMouseOver="show_sub_menu('0');">
            Item 1
            <div id="s0" onMouseOver="show_sub_menu('0');">
                <a href="#">Item 1.1</a>
                <a href="#">Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

接下来让我们检查一下您的 CSS。由于我们想要相对于主菜单项定位子菜单，让我们将 position:relative; 放在列表项本身上以创建一个空间，我们可以从中定位其他内容。

现在我们有了子菜单根据列表项的左上角对齐的上下文，我们真正需要的是让该菜单显示在左上角下方 30 像素处 - 无需左右调整.

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    position:relative;
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:100%;
    top:30px;
    left:0;
}

#menu div a{
    display:block;
    padding:5px;
}

从这里开始，您的子菜单应该位于您需要的位置，但它一直显示。我们将通过将 display:none; 添加到 #menu div 并修改 JavaScript 来更改 display 来解决这个问题:

function show_sub_menu(cath){
    var menu_item = document.getElementById("s"+cath);
    menu_item.style.display = "block";
}

这应该使您的菜单出现在您需要的地方和时间。我会把消失的表演留给你。