Html 在隐藏的父 Div 中显示子 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5521387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Child Div within Hidden Parent Div
提问by Aki Ross
How can I show a Child Div while keeping its Parent Div hidden? Can this be done?
如何在隐藏父 Div 的同时显示子 Div？这能做到吗？
My Code is below:
我的代码如下：
<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>
采纳答案by Headshota
I don't think it's possible.
我不认为这是可能的。
you can use javascript to pull the element out, or duplicate it and then show it.
您可以使用 javascript 将元素拉出，或复制它然后显示它。
in jQuery you could copy an element
在 jQuery 中你可以复制一个元素
var element = jQuery('.Inner-Div').clone();
and then append to any visible element that be appropriate.
然后附加到任何合适的可见元素。
element.appendTo('some element');
回答by Patrick Read
Set the parent class's visibility to hidden or collapse. Set the child to visible. Something like this:
将父类的可见性设置为隐藏或折叠。将孩子设置为可见。像这样的东西：
.parent>.child
{
visibility: visible;
}
.parent
{
visibility: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
}
Full example: http://jsfiddle.net/pread13/h955D/153/
完整示例：http: //jsfiddle.net/pread13/h955D/153/
Edited with help from @n1kkou
在@n1kkou 的帮助下编辑
回答by Luke
Agreed, not possible with display:none. Here's a different solution that will hide parent and show child - however, the height of the parent will not be collapsed.
同意，不能使用 display:none。这是一个不同的解决方案，它将隐藏父级并显示子级 - 但是，父级的高度不会折叠。
.Main-Div {
position: relative;
left: -9999px;
}
.Inner-Div {
position: relative;
left: 9999px;
}
回答by BremnerWafer
Why not:
为什么不：
.Main-Div{
font-size:0px;
line-height:0;
margin:0;
padding:0;
height:0;
}
.Inner-Div{
font-size:12pt
}
instead of display:none if your Main Div is text only?
而不是 display:none 如果您的主 Div 是纯文本？
This solution should collapse the text in the parent div without hiding the child div. Also still works with screen readers without doing weird things like bumping the div out of view or duplicating the object with JS.
此解决方案应在不隐藏子 div 的情况下折叠父 div 中的文本。也仍然可以与屏幕阅读器一起使用，而不会做一些奇怪的事情，例如将 div 撞出视野或用 JS 复制对象。
回答by patrick
I used a jQuery trick to replace the parent code with the child code. It was something I needed for my specific problem, but it might be helpful for someone else:
我使用 jQuery 技巧将父代码替换为子代码。这是我的特定问题所需要的东西，但它可能对其他人有帮助：
<div id='wrapper'>
testcontent... void info from a template
<div id='inside'>
I wanted this content only
</div>
</div>
then the code:
然后代码：
$(document).ready(function(){
$("#wrapper").html($("#inside").html());
});
note that this will not affect the ID's of the DIVS... another option is this (that will keep the ID's the same:
请注意，这不会影响 DIVS 的 ID ......另一个选项是这样（这将保持 ID 相同：
$(document).ready(function(){
$("#wrapper").before($("#inside").outerHTML).remove();
});
回答by bradley.ayers
No. Unfortunately for you, it is notpossible.
不。对您来说不幸的是，这是不可能的。
回答by Umang
Since it's not possible to do that, you could clone/pull the element as mentioned in this answer
由于不可能做到这一点，因此您可以按照本答案中提到的方式克隆/拉出元素
But if events on this element affect its parent/children you can try this workaround.
但如果此元素上的事件影响其父/子，您可以尝试此解决方法。
- Put a wrapper around the parent div
- add another children to the wrapper (which will be used as reference)
- Hide the parent div.
- 在父 div 周围放置一个包装器
- 将另一个孩子添加到包装器（将用作参考）
- 隐藏父 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 -
现在将 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');
});
回答by JPA9000
$(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:
我知道这是一篇较旧的帖子，有人已经接受了答案，但我更喜欢这种方法。JQuery 将通过 append() 方法将元素移动到正文（或任何其他选定位置）。我将父级存储在一个变量中并 detach() 它，因此如果您稍后需要将其全部重新组合在一起，您可以轻松地执行以下操作：
$(body).append(parent);
parent.append(innerElement);
And everything is back the way it was.
一切又回到了原来的样子。
回答by Martin Melichar
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):
我使用带有 querySelector 的简单 JavaScript 来删除所有目标元素，同时保留其中的内容（现在您可以应用任何 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);
}
}
回答by acarlon
Well, this is an old one, but I hit it too. My solution was a bit different:-
嗯，这是一个旧的，但我也击中了它。我的解决方案有点不同：-
- 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.
- Make the inner div (the one that you want to see) position: relative and give it the highest z-order.
- main div starts out as hidden.
- 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.
- 创建一个与背景颜色相同的图像（在我的例子中为白色），将覆盖 div。该图像的绝对定位和 z-index 高于我想隐藏的 div。
- 使内部 div（你想看到的那个） position: relative 并给它最高的 z-order。
- 主 div 开始时是隐藏的。
- 当页面加载时，定位覆盖图像并使主 div 可见。由于 div 是较低的 z 阶，它将位于覆盖图像的后面，因此不可见。但是，内部 div 再次具有更高的 z-order 并且将可见。
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.
这种方法的好处是主 div 和子元素的结构和位置可以始终保持不变。这意味着当你想显示主 div 时，你可以简单地删除覆盖图像。此外，如果您想在调试时查看主 div 的外观，您可以在浏览器调试器工具中删除覆盖图像元素，例如 firefox 中的 firebug 或 chrome 中的 ctrl+shift+i。
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 herefor a good description of how to solve this.
只需记住在需要绝对、相对或固定定位的元素上设置 z-index。如果您在使 z-index 生效时遇到任何问题，可能与堆叠上下文有关。有关如何解决此问题的详细说明，请参见此处。
