[英]js style doesn't update
I have a piece of code which is making me really crazy: I have a horizontal menu in my website, and on a mouseover event on one of the items a vertical submenu appears.我有一段代码让我非常抓狂:我的网站中有一个水平菜单,并且在其中一个项目上的鼠标悬停事件中出现一个垂直子菜单。 I got this to work.我得到了这个工作。 The html looks something like this (don't mind the js for now, comments are also not in the real html): 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>
However, some submenu items are wider than the main menu items they belong to.但是,一些子菜单项比它们所属的主菜单项更宽。 Since the submenu items are variable, it's impossible to hard-code their width.由于子菜单项是可变的,因此不可能硬编码它们的宽度。 Instead I try to get their width on mouseover, and then I want to change the width of the ul to the width of the longest item.相反,我尝试在鼠标悬停时获取它们的宽度,然后我想将 ul 的宽度更改为最长项目的宽度。 The javascript code I use is this:我使用的 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;
}
}
}
as you can see, if the menu is shown the original width is saved, and a new width is applied.如您所见,如果显示菜单,则会保存原始宽度,并应用新宽度。 The alert function alerts the correct new width.警报 function 提醒正确的新宽度。 However, for some reason the new width isn't shown on the page.但是,由于某种原因,新的宽度没有显示在页面上。
I just can't find out what I'm doing wrong.我只是无法找出我做错了什么。 Can anyone help me?谁能帮我?
edit: I didn't thought of the pure css solution.编辑:我没有想到纯 css 解决方案。 However, I still want to know why the page wasn't updated.但是,我仍然想知道为什么页面没有更新。 Does anyone has the answer to that?有人对此有答案吗?
This seems like a lot of engineering to acheive something rather simple.这似乎需要大量的工程来实现一些相当简单的事情。 Firstly, have you considered fixed widths for the drop-down results.首先,您是否考虑过下拉结果的固定宽度。
Next have you checked out the many many pure CSS examples out there, so you don't need to use JavaScript at all?接下来,您是否检查了许多纯 CSS 示例,所以您根本不需要使用 JavaScript?
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.