js風格不更新

我有一段代碼讓我非常瘋狂：我在我的網站上有一個水平菜單，並且在其中一個項目上的一個鼠標懸停事件上出現一個垂直子菜單。我得到了這個工作。在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>

然而，一些子菜單項比他們屬於主菜單項更寬。由於子菜單項是可變的，所以不可能對它們的寬度進行硬編碼。相反，我嘗試在mouseover上獲得它們的寬度，然後我想將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解決方案。不過，我仍然想知道該頁面未更新的原因。有沒有人有答案？

來源

2011-06-03 Tiddo

我不認爲你正在採取正確的形式給出。對於你的情況，完全不需要js，它可以在css – Ibu 2011-06-03 18:52:32

這看起來像很多工程，以獲得相當簡單的東西。首先，你是否考慮了下拉結果的固定寬度。

接下來，您是否檢出了許多純CSS樣例，因此您根本不需要使用JavaScript？

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

來源

2011-06-03 18:55:53

中完成，感謝你的回答，我沒有想到純CSS解決方案。但是，我仍然不明白爲什麼頁面沒有更新。你也知道爲什麼會發生？ – Tiddo 2011-06-06 20:17:38

js風格不更新

回答

相關問題