Question

如何在隐藏其父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>

Answer 1

将父类的可见性设置为隐藏或折叠。将孩子设置为可见。像这样：

.parent>.child
{
    visibility: visible;
}

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

完整示例： http://jsfiddle.net/pread13/h955D/153/

在@n1kkou

的帮助下编辑

Answer 2

我认为这不可能。

您可以使用javascript将元素拉出，或复制它然后显示它。

在jQuery中你可以复制一个元素

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

然后附加到任何适当的可见元素。

element.appendTo('some element');

Answer 3

同意，不能使用display：none。这是一个隐藏父项和显示子项的不同解决方案 - 但是，父项的高度不会被折叠。

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

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

示例：http://jsfiddle.net/luke_charde/jMYF7/

Answer 4

没有。不幸的是，不可能。

Answer 5

为什么不：

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

}

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

而不是display：none，如果您的主要内容只是文本？

此解决方案应该折叠父div中的文本而不隐藏子div。还可以使用屏幕阅读器，而不会做出奇怪的事情，比如将视图撞出视图或用JS复制对象。

Answer 6

您可以使用javascript将孩子移出main-div。

Answer 7

嗯，这是一个旧的，但我也打了它。我的解决方案有点不同： -

创建一个与背景颜色相同的图像（在我的情况下为白色），它将覆盖div。此图像的绝对定位和z-index高于我想要隐藏的div。
使内部div（你想看到的那个）位置：相对并给它最高的z顺序。
主要div开始隐藏。
当页面加载时，定位覆盖图像并使主div可见。由于div是较低的z顺序，因此它将位于覆盖图像的后面，因此不可见。但是，内部div再次具有更高的z顺序并且将是可见的。

这种方法的好处是主要div和子元素的结构和位置可以保持不变。这意味着当您想要显示主div时，您可以简单地删除覆盖图像。另外，如果你想看看调试时主要div会是什么样子，你可以在浏览器调试工具中删除覆盖图像元素，例如firefox中的firebug或chrome中的ctrl + shift + i。

请记住在需要定位为绝对，相对或固定的元素上设置z-index。如果您在使z-index生效时遇到任何问题，可能与堆叠上下文有关。有关如何解决此问题的详细说明，请参阅here。

Answer 8

我使用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();
});

Answer 9

由于无法做到这一点，您可以按照此answer

中的提及克隆/拉取元素

但是如果此元素上的事件影响其父/子，您可以尝试此解决方法。

在父div
将另一个子项添加到包装器（将用作参考）
隐藏父div。

喜欢这个 -

 <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>

现在触发div'Inner-Div-Refer'中的所有事件到原始div'Inner-Div'。喜欢 -

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

Answer 10

$(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(); })

我知道这是一篇较旧的帖子，有人已经接受了答案，但我更喜欢这种方法。 JQuery将通过append（）方法将元素移动到正文（或任何其他选定位置）。我将父项存储在变量中并分离（），所以如果你需要将它们全部重新组合在一起，你可以很容易地做到：

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

一切都恢复原状。

Answer 11

我将简单的JavaScript与querySelector一起使用，以删除所有目标元素，同时保留其中的内容（现在您可以仅应用任何CSS选择器）：

{
    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);
    }
}

在隐藏的父级Div中显示Child Div

11 个答案: