숨겨진 상위 사업부 내에 하위 사업부 표시

숨겨진 상위 사업부 내에 하위 사업부 표시

---

부모 Div를 숨긴 채로 Child Div를 표시하려면 어떻게해야합니까? 할 수 있습니까?

내 코드는 다음과 같습니다.

<style>
  .Main-Div{
   display:none;
}
</style>

<div class="Main-Div">
    This is some Text..
    This is some Text..
    <div class="Inner-Div'>
        <a href="#"><img src="/image/pic.jpg"></a>
    </div>
    This is some Text..
    This is some Text..
</div>

---

나는 그것이 가능하다고 생각하지 않는다.

자바 스크립트를 사용하여 요소를 꺼내거나 복제 한 다음 표시 할 수 있습니다.

jQuery에서 요소를 복사 할 수 있습니다.

var element = jQuery('.Inner-Div').clone();

적절한 가시적 요소에 추가합니다.

element.appendTo('some element');

---

부모 클래스의 가시성을 숨김 또는 축소로 설정합니다. 아이를 보이도록 설정합니다. 이 같은:

.parent>.child
{
    visibility: visible;
}

.parent
{
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

전체 예 : http://jsfiddle.net/pread13/h955D/153/

@ n1kkou의 도움으로 편집 됨

---

동의합니다. display : none에서는 불가능합니다. 다음은 부모를 숨기고 자식을 표시하는 다른 솔루션입니다. 그러나 부모의 높이는 축소되지 않습니다.

.Main-Div {
    position: relative;
    left: -9999px;
}

.Inner-Div {
    position: relative;
    left: 9999px;
}

예 : http://jsfiddle.net/luke_charde/jMYF7/

---

아니요. 안타깝게도 불가능 합니다.

---

왜 안 되는가 :

.Main-Div{
font-size:0px;
line-height:0;
margin:0;
padding:0;
height:0;

}

.Inner-Div{
font-size:12pt
}

display : none 대신 Main Div가 텍스트 전용 인 경우?

이 솔루션은 자식 div를 숨기지 않고 부모 div의 텍스트를 축소해야합니다. 또한 div를 뷰에서 범프하거나 JS로 개체를 복제하는 것과 같은 이상한 작업을 수행하지 않고도 화면 판독기와 함께 작동합니다.

---

자바 스크립트를 사용하여 자식을 main-div에서 이동할 수 있습니다.

---

jQuery 트릭을 사용하여 부모 코드를 자식 코드로 대체했습니다. 내 특정 문제에 필요한 것이었지만 다른 사람에게 도움이 될 수 있습니다.

<div id='wrapper'>
   testcontent... void info from a template
   <div id='inside'>
      I wanted this content only
   </div>
</div>

그런 다음 코드 :

$(document).ready(function(){
   $("#wrapper").html($("#inside").html());
});

이것은 DIVS의 ID에 영향을주지 않습니다. 또 다른 옵션은 이것입니다 (ID를 동일하게 유지합니다 :

$(document).ready(function(){
   $("#wrapper").before($("#inside").outerHTML).remove();
});

---

그렇게 할 수 없기 때문에이 답변 에서 언급 한대로 요소를 복제 / 끌 수 있습니다.

But if events on this element affect its parent/children you can try this workaround.

1. Put a wrapper around the parent div
2. add another children to the wrapper (which will be used as reference)
3. Hide the parent div.

Like this -

 <style>
  .Main-Div{
  display:none;
  }
 </style>

 <div class="wrapper">

  <div class="Main-Div">
    This is some Text..
    This is some Text..
    <div class="Inner-Div'>
      <a href="#"><img src="/image/pic.jpg"></a>
    </div>
    This is some Text..
    This is some Text..
  </div>

  <div class="Inner-Div-Refer'>
    <a href="#"><img src="/image/pic.jpg"></a>
  </div>

</div>

Now trigger all events in div 'Inner-Div-Refer' to original div 'Inner-Div'. Like -

$('.Inner-Div-Refer a').click(function(){
  $(this).parent().children('.Main-Div').children('.Inner-Div').children('a').trigger('click');
});

---

Well, this is an old one, but I hit it too. My solution was a bit different:-

1. Create an image with the same colour as the background (white in my case) that will cover the div. This image has absolute positioning and z-index higher than the div that I want to hide.
2. Make the inner div (the one that you want to see) position: relative and give it the highest z-order.
3. main div starts out as hidden.
4. When the page loads, position the covering image and make the main div visible. Since the div is a lower z order it will be behind the covering image so not visible. However, the inner div has a higher z-order again and will be visible.

The benefit of this approach is that the structure and position of the main div and child elements can remain unchanged throughout. This means that when you want to show the main div, you can simply remove the covering image. Also, if you want to see what the main div would look like when debugging you can just remove the covering image element in the browser debugger tools, such as firebug in firefox or ctrl+shift+i in chrome.

Just remember to set the z-index on an element it needs to be positioned absolute, relative or fixed. If you have any problems getting the z-index to take effect it is probably to do with stacking contexts. See here for a good description of how to solve this.

---

$(document).ready(function(){
var innerElement = $('.Inner-Div');
var parent = $('.Main-Div');

// body or whatever selector you want to move the element
$(body).append(innerElement);

// could use hide also
parent.detach(); })

I know this is an older post and someone already accepted the answer but I prefer this method. JQuery will move the element to the body (or any other selected location) via the append() method. I store the parent in a variable and detach() it so if you need to put it all back together later you can easily do:

$(body).append(parent);
parent.append(innerElement);

And everything is back the way it was.

---

I used simple JavaScript with querySelector to remove all target elements, while keeping what is inside them (now you can just apply any CSS selector):

{
    let selector = 'div';
    let remove_element = document.querySelector(selector);

    //loop continues removing elements until they are all out
    while (remove_element)
    {
        remove_element.outerHTML = remove_element.innerHTML;
        remove_element = document.querySelector(selector);
    }
}

ReferenceURL : https://stackoverflow.com/questions/5521387/show-child-div-within-hidden-parent-div