在隐藏的父 Div 中显示子 Div

Question

如何在隐藏父 Div 的同时显示子 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

同意，display:none 不可能。这是一个不同的解决方案，它将隐藏父项并显示子项 - 但是，父项的高度不会折叠。

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

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

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

Answer 3

为什么不：

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

}

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

如果您的 Main Div 仅是文本而不是 display:none？

此解决方案应折叠父 div 中的文本而不隐藏子 div。也仍然可以与屏幕阅读器一起使用，而不会做奇怪的事情，例如将 div 撞出视野或使用 JS 复制对象。

Answer 4

我认为这是不可能的。

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

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

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

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

element.appendTo('some element');

Answer 5

我使用 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 6

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

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

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

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

Answer 7

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

Answer 8

由于无法做到这一点，您可以克隆/拉取此answer 中提到的元素

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

1. 在父 div 周围放置一个包装器
2. 向包装器添加另一个子级（将用作参考）
3. 隐藏父 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 9

$(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() 方法将元素移动到正文（或任何其他选定位置）。我将父级存储在一个变量中并 detach() 它，因此如果您稍后需要将它们全部重新组合在一起，您可以轻松做到：

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

一切都回到了原来的样子。

Answer 10

我使用简单的 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);
    }
}