부모는 숨겨졌지만 아이들은 여전히 ​​눈에니다 (나는 보이지 않게하고 싶습니다)!

Question

좋아요, 그래서 웹 페이지의 부모 DIV 요소에 복제 된 DOM 요소를 추가해야하는 상황이있었습니다.

나는이 부모 DIV 소지자 중 4 명이있었습니다. 가시성을 숨김 상태로 바꿀 때 정말 이상한 일이 발생합니다. 모든 게시물 페이지로드 추가 된 자식이 계속 표시됩니다! 여기

는 소스 코드를 다운로드 할 수있는 링크입니다 : http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

을 여기 현상을 처음으로 직접 볼 수있는 링크입니다 : 당신이 볼 무엇 http://www.clarencebowman.com/parent-child-visibility

일부 마젠타 빨간색 상자입니다 하위 요소가 추가되고 페이지로드가 게시됩니다. 페이지 하단에 표시/숨기기 단추가 있습니다.

부모 요소 DIV에 녹색 줄무늬를 추가하여 자식 요소가 실제로 해당 가시성을 올바르게 상속 받았음을 보여줍니다.

그러나 복제 된 하위 요소를 추가 한 다음 상위 DIV를 숨기면 복제 된 하위 요소 중 아무 것도 사라집니다.

복제 스크립트를 실행하기 전에 이미 부모 DIV 안에 복제 할 자식을 배치하려고 시도했지만 아무런 차이가 없습니다.

후 페이지로드를 추가 된 자식 요소

는 ..... 어떻게 든 부모 DIV 요소 (빨간색 상자)과의 상속 링크를 잃은

누구나 다른 사람의 경험이 보인다? 아이들의 상속을 수리/교체/재 할당하는 간단한 방법이 있습니까?

저는 jQuery 1.5를 사용하고 있습니다.

Answer 1

당신은 (아이들에 영향을 줄 수있는) 부모에 display: none를 사용하지 않는, 당신은 부모에 visibility: none을 사용하고, 아이들 내에 visibility: visible CSS 속성을 가지고있다. 자녀가 숨기기를 원하면 visible: hidden으로 설정하거나 부모 요소에 display: none을 사용하십시오.

카일 (Kyle)이 지적했듯이 을 #parent_div에 쉽게 적용 할 수있는 $('#parent_div').toggle();을 사용할 수 있습니다.

나는 그저 visibility과 display이 같지 않습니다. 요소 인 경우, 예를 들어, width: 10px는 height: 10px는 visibility는 display: none 완전히 부모 요소 (width: 0, height: 0)에서 소자의 크기를 제거하는 반면, (여전히 width: 10px, height: 10px을 차지) 요소의 차원 공간을 유지한다. Visibility은 영향을받는 다른 요소와 관련하여 흐름 상 시각적으로 여전히 시각적으로 표현된다는 것을 의미합니다. display은 다른 표시되거나 보이는 요소와 관련하여 화면에서 보거나 나타내지 않음을 의미합니다.

Answer 2

어린이의 visibility : visible 속성을 제거합니다. 그것은 당신의 문제를 해결할 것입니다. 부모에 대신 .hide() 및 .show() (또는 .toggle())를 사용하여 디스플레이를 숨김 대신 none으로 설정할 수 있습니다.

Answer 3

다른 많은 사람들은 display: none을 사용하기 위해 언급했지만 알고 있듯이 visibility 속성을 사용하는 것과는 완전히 다른 동작을합니다. 당신이 할 수있는

한 가지 hidden/inherit 대신 hidden/visible으로 사용하는 것입니다. inherit은 부모 중 하나가 아닌 경우 요소가 기본적으로 표시되게합니다. 어느 것이 당신이 원하는지입니다.

Answer 4

여기에 제안 된 두 가지 해결책을 사용할 수없는 경우도 있습니다.

예. display: none은 숨겨지면서 요소를 렌더링 할 때 너비와 높이를 알아야하기 때문에 작동하지 않습니다. visibility: hidden은 자녀를 제어 할 수 없으며 visiblity:inherit을 추가 할 수없는 경우 작동하지 않을 수 있습니다.

이 경우 opacity: 0을 추가하여 시각적으로 숨겨진 요소를 표시 할 수 있습니다 (예 : z-index:-1). 요소가 시각적으로 숨겨 지도록 할 수 있습니다.