在隐藏父 Div 中显示子 Div

小开

不，对你来说不幸的是，这是没有的可能性。

小开

最佳答案

我觉得这不可能。

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

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

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

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

element.appendTo('some element');

小开

同意，不可能与 display:none。这里有一个不同的解决方案，将隐藏父级和显示子级-但是，父级的高度不会被折叠。

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


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

例子: http://jsfiddle.net/luke_charde/jMYF7/

小开

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

创建一个与背景(在我的例子中是白色)具有相同颜色的图像来覆盖 div。这个图像的绝对位置和 z 索引高于我想隐藏的 div。
使内部 div (您想要看到的那个)位置为: 相对，并给它最高的 z 阶。
Main div 一开始是隐藏的。
加载页面时，定位覆盖图像并使主分区可见。由于 div 是一个较低的 z 阶，它将位于覆盖图像的后面，因此不可见。但是，内部 div 再次具有较高的 z 阶，并且将是可见的。

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

只要记住将 z 索引设置在需要定位为绝对、相对或固定的元素上。如果在使 z-index 生效方面遇到任何问题，可能与堆栈上下文有关。有关如何解决这个问题的详细说明，请参阅给你。

小开

为什么不:

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


}


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

而不是显示: 没有，如果你的主分区是文本只？

这个解决方案应该在不隐藏子 div 的情况下折叠父 div 中的文本。此外，仍然可以在屏幕阅读器上工作，而不会做一些奇怪的事情，比如将 div 从视图中删除，或者使用 JS 复制对象。

小开

我使用 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... ... 另一个选项是 this (它将使 ID 保持不变:

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

小开

将父类的可见性设置为隐藏或折叠。将子类设置为可见。如下所示:

.parent>.child
{
visibility: visible;
}


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

完整的例子: Http://jsfiddle.net/pread13/h955d/153/

在 @ n1kkou的帮助下编辑

小开

因为这是不可能做到的，所以您可以像本回答中提到的那样克隆/提取元素

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

在父 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 中的所有事件‘ Inside-Div-Reference’到原始 div‘ Inside-Div’

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

小开

$(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 (或任何其他选定的位置)。我将父元素存储在一个变量中，然后分离()它，这样，如果以后需要将它们重新组合在一起，就可以很容易地做到:

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

一切都恢复原样了。

小开

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

小开

为此，我分别使用父元素和子元素上的可见性标记，然后使用 position 标记将子元素移回到适合文档流的位置。

“ display: none”不是一个选项，因为您不能使用此选项显示元素的子元素

.archive-title-custom-css {
visibility:hidden;
position:relative;
}
.archive-title-custom-css span {
visibility:visible;
position:absolute;
left:0;
}