jquery隐藏html中的父级元素,css-在隐藏的父Di中显示子Div-CSDN博客

css-在隐藏的父Di中显示子Div

在隐藏其父级Div的同时如何显示子Div？能做到吗？

我的代码如下：

.Main-Div{

display:none;

}

This is some Text..

Aki Ross asked 2019-12-24T16:01:31Z

11个解决方案

80 votes

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

.parent>.child

{

visibility: visible;

}

.parent

{

visibility: hidden;

width: 0;

height: 0;

margin: 0;

padding: 0;

}

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

在@ n1kkou的帮助下编辑

Patrick Read answered 2019-12-24T16:02:31Z

30 votes

我认为这是不可能的。

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

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

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

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

element.appendTo('some element');

Headshota answered 2019-12-24T16:02:03Z

21 votes

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

.Main-Div {

position: relative;

left: -9999px;

}

.Inner-Div {

position: relative;

left: 9999px;

}

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

Luke answered 2019-12-24T16:02:56Z

3 votes

不。对您来说不幸的是，这是不可能的。

bradley.ayers answered 2019-12-24T16:03:16Z

3 votes

为什么不：

.Main-Div{

font-size:0px;

line-height:0;

margin:0;

padding:0;

height:0;

}

.Inner-Div{

font-size:12pt

}

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

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

BremnerWafer answered 2019-12-24T16:03:44Z

1 votes

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

Jeff Martin answered 2019-12-24T16:04:05Z

1 votes

我使用jQuery技巧将父代码替换为子代码。这是我遇到的特定问题所需要的，但对其他人可能会有所帮助：

testcontent... void info from a template

I wanted this content only

然后是代码：

$(document).ready(function(){

$("#wrapper").html($("#inside").html());

});

请注意，这不会影响DIVS的ID。另一种选择是(这将使ID保持相同：

$(document).ready(function(){

$("#wrapper").before($("#inside").outerHTML).remove();

});

patrick answered 2019-12-24T16:04:34Z

1 votes

由于无法执行此操作，因此您可以按照此答案中的说明克隆/拉动元素

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

在父div周围放一个包装纸

向包装器添加另一个子代(将用作参考)

隐藏父div。

像这样 -

.Main-Div{

display:none;

}

This is some Text..

现在触发div“内部细分引用”中的所有事件到原始div“内部细分”。喜欢 -

$('.Inner-Div-Refer a').click(function(){

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

});

Umang answered 2019-12-24T16:05:20Z

0 votes

好吧，这是一个旧的，但我也打过。我的解决方案有点不同：

创建具有与背景相同颜色的图像(在我的情况下为白色)，以覆盖div。该图像的绝对定位和z索引高于我要隐藏的div。

将内部div(您要查看的一个)位置：相对，并赋予其最高的z顺序。

main div开始为隐藏。

页面加载后，放置封面图像并使主div可见。由于div是较低的z阶，因此它将位于覆盖图像的后面，因此不可见。但是，内部div再次具有较高的z顺序，并且将可见。

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

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

acarlon answered 2019-12-24T16:06:09Z

0 votes

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

一切都恢复了原样。

JPA9000 answered 2019-12-24T16:06:33Z

0 votes

我将简单的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);

}

Martin Melichar answered 2019-12-24T16:06:54Z