Как перемещать элементы html с помощью Javascript?

Question

Можно ли прикрепить тег html другим, используя Javascript?

<li> другим <li>?

Например, я создаю выпадающее меню. Я ДИВ отдельно от <ul> тега

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

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

Когда я нажимаю, например, ссылку, то я хочу подменю, чтобы показать под menu1 так результат будет как:

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

Причина почему я выбираю <div>, чтобы быть отделенным от начала, а не вложенным в тег <li>, является то, что если я устанавливаю «скрывать» <div>, он скрывается, но он занимает пространство и создает большое пространство между menu1 и любым содержимым ниже, поэтому моя страница выглядит странно :

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

EDIT

Спасибо за совет, ребята, я решил проблему с удалением DIV и вложенных <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. A li должен содержаться либо в ol, либо в элементе ul. Изменение

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

в

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

Для вашей основной проблемы, нет необходимости ставить DIV (или в идеале уль) за пределами основных ул. Когда вы скрываете элемент, установив его visibility на hidden, он все равно займет пустое пространство. Чтобы полностью скрыть его и удалить любое пространство, которое оно принимало, установите для свойства display CSS значение none.

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

Answer 3

Обычно вы положили подменю в другой <ul> внутри <li> в главном меню (так что вы получите правильный HTML), и скрыть его с display: none 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> 

Затем в CSS (или добавленные с помощью 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. У вас есть все меню предварительно созданного (обратите внимание, что гнездятся <div> в <ul> недействителен HTML):

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

, а затем вы объявляете в CSS:

ul.submenu { 
    display: none; 
} 

Теперь вы можете удалить или добавить «подменю «CSS-класс от <ul> через JavaScript, или вы установите свойство .style.display.

Или еще более элегантно (но менее кросс-браузерный, если вы по-прежнему заботиться о старых браузерах), полностью без JavaScript через чистого CSS:

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