如何使用Javascript移動html元素？

Question

是否有可能將HTML標籤附加到使用Javascript的其他人？

<li>到其他<li>？

例如，我正在創建下拉菜單。

<ul> 
    <li>menu1</li> 
    <div id="submenu1"> 
    <li>sub1</li> 
    <li>sub2</li> 
    </div> 
</ul> 

原因： 我已經DIV從<ul>標籤

<ul> 
    <li>menu1</li> 
    <li>menu2</li> 
</ul> 

<div id="submenu1"> 
    <li>sub1</li> 
    <li>sub2</li> 
</div> 

當我點擊，比如說，一個鏈接，然後我想子菜單下的菜單1顯示了這樣的結果會是這樣分開爲什麼我選擇<div>從開頭而不是嵌套在<li>標籤中，如果我設置了<div>「隱藏」，它會隱藏，但它佔據了空間並在menu1和下面的任何內容之間創建了很大的空間，所以我的頁面看起來很奇怪：

mypage 
---------------------------- 
| menu1 
| 
|     <------ big open space div is hiding 
|    
| 
| hello content start here 

編輯

謝謝你的提示，大家好，我已經解決了這個問題，除去股利和嵌套<ul>每建議。子菜單顯示時，元素仍在移動，但使用了CSS位置：絕對值和指定z-index的幫助。

Answer 1

如果使用display: none在你的CSS然後隱藏的元素不需要任何空間：

HTML：

<ul> 
    <li>menu1 
    <ul id="submenu1"> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul> 
    </li> 
    <li class="active">menu2 
    <ul id="submenu1"> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul> 
</ul> 

CSS：

li ul { 
    display: none; 
} 

li.active { 
    display: block; 
} 

Answer 2

這是無效的HTML。 li應該包含在ol或ul元素中。更改

<div id="submenu1"> 
    <li>sub1</li> 
    <li>sub2</li> 
</div> 

到

<ul id="submenu1"> 
    <li>sub1</li> 
    <li>sub2</li> 
</ul> 

爲了您的主要問題，有沒有必要把股利（或理想UL）主UL之外。當您通過將visibility設置爲hidden來隱藏某個元素時，它仍將佔用空白區域。要完全隱藏它並刪除它所佔用的空間，請將display CSS屬性設置爲none。

document.getElementById('submenu1').style.display = 'none'; 

Answer 3

通常你把一個<li>內的另一<ul>子菜單在主菜單（讓你得到有效的HTML），並與display: none CSS屬性隱藏它，並顯示在點擊。

在你的CSS

<ul> 
    <li><a href="menu1">menu item 1</a><ul class="submenu"> 
     <li>sub 1</li> 
    </ul></li> 
    <li><a hrf="menu2">menu item 2</a></li> 
    </u> 

然後（或添加使用JS）：

ul.submenu { 
    display: none; 
    } 
    a:hover + ul.submenu, ul.submenu:hover { 
    display: block; 
    } 

這一次將在現代瀏覽器中運行，沒有任何JS！當然，你也可以用js來做。

Answer 4

<ul> 
    <li>menu1</li> 
    <div id="submenu1" style="display: none"> 
    <li>sub1</li> 
    <li>sub2</li> 
    </div> 
    <li>menu2</li> 
</ul> 

試試吧，這會讓div無法佔用空間。如果你使用visiblity：hidden，那麼它會佔用空間。

Answer 5

這通常通過CSS完成。你有整個菜單預先創建（注意，內<ul>嵌套<div>是無效的HTML）：

<ul class="menu"> 
    <li>menu1 
    <ul class="submenu"> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul> 
    </li> 
</ul> 

，然後你在CSS聲明：

ul.submenu { 
    display: none; 
} 

現在你可以刪除或添加了「子菜單「通過JavaScript從<ul>獲得CSS類，或者你設置了.style.display屬性。

甚至更​​優雅（但不跨瀏覽器兼容，如果你還愛老的瀏覽器），完全沒有JavaScript通過純CSS：

ul.menu > li:hover ul.submenu { 
    display: block; 
} 
ul.submenu:hover { 
    display: block; 
}