Javascript를 사용하여 html 요소를 이동하는 방법은 무엇입니까?

Question

Javascript를 사용하여 다른 사람들에게 HTML 태그를 첨부 할 수 있습니까?

<li> 다른 <li>?

예를 들어, 드롭 다운 메뉴를 만들고 있습니다.

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

이유 : 나는 DIV 나 클릭하면

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

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

은, 말하자면, 링크가, 그때 결과는 같을 것이다 있도록 하위 메뉴가 MENU1 아래에 표시 할 <ul> 태그에서 분리 한 왜 <div>을 <li> 태그로 중첩하지 않고 처음부터 구분하도록 선택해야합니까? <div>을 "숨김"으로 설정하면 숨기지 만 아래 공간과 메뉴 1 사이에 큰 공간이 생겨서 내 페이지가 이상하게 보입니다. :

팁들에 대한 0

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

편집

덕분에, 나는 제거 사업부와 함께 문제를 해결했습니다 및 제안 당 <ul> 중첩있다. 하위 메뉴가 나타나지만 CSS 위치를 사용할 때 요소는 여전히 이동됩니다. 절대 및 Z- 인덱스 지정이 도움이됩니다.

Answer 1

그런 다음 숨겨진 요소가 어떤 공간을 필요로하지 않는 CSS에 display: none를 사용하는 경우 :

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

은 일반적으로 당신이 (당신이 유효한 HTML을 얻을 수 있도록) 메인 메뉴에서 <li> 안에 다른 <ul>에서 하위 메뉴를 넣어 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 class="menu"> 
    <li>menu1 
    <ul class="submenu"> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul> 
    </li> 
</ul> 

을 그리고 당신은 CSS에서 선언한다 : 당신은 미리 만들어 전체 메뉴가 있습니다 (<ul> 내 <div>를 중첩하는 것은 잘못된 HTML이 있습니다) 제거 또는 "하위 메뉴를 추가 할 수 있습니다 지금

ul.submenu { 
    display: none; 
} 

"CSS 클래스 <ul>에서 JavaScript를 사용하거나 .style.display 속성을 설정합니다.

또는 더 우아하게 (미만 크로스 브라우저 호환, 당신은 여전히 ​​오래된 브라우저를 돌보는 경우), 완전히 순수 CSS를 통해 자바 스크립트없이 :

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