Как переместить элементы HTML, используя Javascript?

Question

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

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

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

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

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

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

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

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

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

EDIT

Спасибо за подсказку, ребята, я решил проблему с удалением div и вложил <ul> за предложение. Элементы все еще сдвигаются, когда появляется подменю, но используется позиция CSS: помогло абсолютное и задание z-index.

Answer 1

Обычно это делается с помощью 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;
}

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>

Для вашей основной проблемы нет необходимости помещать div (или в идеале ul) вне основного ul. Когда вы скрываете элемент, устанавливая для 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

Если вы используете 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;
}