在隐藏的父分区内显示子分区
如何在隐藏父分区的同时显示子分区？ 可以这样做吗？
我的代码如下：
<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> 我不认为这是可能的。
你可以使用JavaScript来拉出元素，或复制它，然后显示它。
在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的帮助下编辑
同意，不可能与显示：无。 这是一个不同的解决scheme，将隐藏父母和显示子 – 但是，父母的高度不会被折叠。
.Main-Div { position: relative; left: -9999px; } .Inner-Div { position: relative; left: 9999px; }
例如： http : //jsfiddle.net/luke_charde/jMYF7/
不，不幸的是，这是不可能的。
你可以使用JavaScript来移出主要的div的孩子。
好吧，这是一个老的，但我也打了。 我的解决scheme有点不同：
- 创build一个与背景颜色相同的图像（在我的情况下是白色），将覆盖div。 这个图像的绝对定位和z-index比我想要隐藏的div高。
- 使内部的div（你想看到的）位置：相对，并给它最高的Z顺序。
- 主格开始隐藏。
- 加载页面时，放置覆盖图像并使主div可见。 由于div是一个较低的z顺序，它将在覆盖图像后面，因此不可见。 然而，内部div再次具有更高的z次序并且将是可见的。
这种方法的好处是主要的分格和子元素的结构和位置可以始终保持不变。 这意味着当你想显示主格，你可以简单地删除覆盖图像。 另外，如果你想查看debugging的主界面，你可以在浏览器的debugging工具中去掉覆盖图像元素，比如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 }
而不是显示：如果您的主分区是文本只有没有？
此解决scheme应该折叠父div中的文本而不隐藏子div。 也仍然适用于屏幕阅读器，而不会做怪异的事情，比如将div从视图中popup或用JS复制对象。
由于这是不可能的，所以你可以像这个答案中提到的那样克隆/拉取元素
但是，如果此元素上的事件影响其父/孩子，您可以尝试此解决方法。
- 把一个包装父母的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'); });
我用一个jQuery技巧来replace父代码与子代码。 这是我的具体问题所需要的，但是对其他人可能有帮助：
<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(); });
$(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(); })
我知道这是一个较旧的post，有人已经接受了答案，但我更喜欢这种方法。 jQuery将通过append（）方法将元素移动到主体（或任何其他选定的位置）。 我把父存储在一个variables中，然后分离（），所以如果你以后需要把它们全部放回去，你可以很容易地做到：
$(body).append(parent); parent.append(innerElement);
一切都恢复了原样。
