2011-06-03 57 views
0

私は本当に狂ったコードを持っています。ウェブサイトには水平メニューがあり、アイテムの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ソリューションを考えていませんでした。しかし、私はまだページが更新されなかった理由を知りたいです。誰にもその答えがありますか?

+0

あなたは正しいアプローチをとっていないと思います。あなたのケースでは、jsはまったく必要ではありません。それはすべてCSSで行われます – Ibu

答えて

1

これはむしろ単純なものを達成するための多くの工学のようです。まず、ドロップダウン結果の固定幅を考慮しましたか?

次に、多くの純粋なCSSの例がありますので、JavaScriptをまったく使用する必要はありませんか?

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

+0

あなたの答えに感謝します。私は純粋なCSSソリューションは考えていませんでした。しかし、私はまだページが更新されない理由を理解していません。それがなぜ起こったのか知っていますか? – Tiddo

関連する問題