Question

我有一段令我疯狂的代码：我的网站上有一个水平菜单，并且在其中一个项目的鼠标悬停事件中出现一个垂直子菜单。我得到了这个工作。 html看起来像这样（不介意现在的js，评论也不在真正的HTML中）：

<ul class="menu" onmouseout="menu('item',false)">  //the real html has some code to prevent nested elements to call the onmouseout event
    <li id="itemLI">
        <ul onmouseover="menu('item',true)">
            <li><img src=somesource width=somewidth /></li>
            <li class="drowdown item">submenuitem which is wider than the main menu item</li> //hidden until mouseover of the main item
        </ul>
    </li>
    //somemoreitems
</ul>

但是，某些子菜单项比它们所属的主菜单项更宽。由于子菜单项是可变的，因此无法对其宽度进行硬编码。相反，我尝试在鼠标悬停时获得宽度，然后我想将ul的宽度更改为最长项目的宽度。我使用的javascript代码是：

var orwidth = 0;
function menu(menuItem,show)
{
    //change menu width
    var item = menuItem + "LI";
    if (show)
    {
        //The important part which doesn't work
        var element = document.getElementById(item);
        var style = getComputedStyle(element,null);
        orwidth = style.width;
        element.style.width = "auto";
        style = getComputedStyle(element,null);
        alert(style.width);
    }
    else
    {
        document.getElementById(item).style.width = orwidth;
    }
    //show submenu
    if (show)
    {
        var visible ="visible";
    }
    else
    {
        var visible = "hidden";
    }
    var lis = document.getElementsByTagName("li");
    for (temp in lis)
    {
        if (lis[temp].className.indexOf("dropdown") != -1 && lis[temp].className.indexOf(menuItem) != -1)
        {
            lis[temp].style.visibility = visible;
        }
    }

}

如您所见，如果显示菜单，则保存原始宽度，并应用新宽度。警报功能会警告正确的新宽度。但是，由于某种原因，新宽度未显示在页面上。

我无法找出我做错了什么。任何人都可以帮助我吗？

编辑：我没有想到纯粹的CSS解决方案。但是，我仍然想知道为什么页面没有更新。有人有答案吗？

Answer 1

这似乎是很多工程来实现一些相当简单的事情。首先，您是否考虑了下拉结果的固定宽度。

接下来你有没有看过许多纯CSS示例，所以你根本不需要使用JavaScript？

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

js风格没有更新

1 个答案: