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
}

menu.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;
}

menu.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;放在list-item本身上以创建一个空间，我们可以从中定位其他东西。

现在我们有了一个上下文，其中子菜单根据列表项的左上角对齐，我们真正需要的是该菜单从该角落向下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";
}

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

用JavaScript改变CSS的问题

1 个答案: