私は本当に狂ったコードを持っています。ウェブサイトには水平メニューがあり、アイテムの1つにmouseoverイベントがあると、垂直サブメニューが表示されます。私はこれを働かせる。 HTMLは次のようなものになります(今のjsのを気にしないが、コメントは実際のHTMLでもありません):jsスタイルは更新されません
<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ソリューションを考えていませんでした。しかし、私はまだページが更新されなかった理由を知りたいです。誰にもその答えがありますか?
あなたは正しいアプローチをとっていないと思います。あなたのケースでは、jsはまったく必要ではありません。それはすべてCSSで行われます – Ibu