Jquery Hide() 和 Show() 不工作——非常沮丧

Question

我有一些像这样的 HTML

<div id="topContainer">
 <div id="level1" style="display:none;"> </div>
 <div id="level2" style="display:none;"></div>
</div>

，我可以检索 level1 和 level2，成功调用它们的 show() 和 hide() 。但是，有 style="display:none;"然后调用 jQuery("#topContainer").show() 也没什么作用。 :(

可能出了什么问题？

下面的 JS

//LOGIC HERE THAT SHOWS LEVEL1 and LEVEL2 based on business logic

//If neither div is shown (got a variable set to false, it set to true each time
//the business logic shows the div
//if variable is still false, then the below line runs
jQuery("#topContainer").hide()

用尽可能多的代码进行了更新。

Answer 1

.show() 和 .hide() 父级不会影响子级，如果它们被隐藏，它们将保持隐藏状态...它们是独立处理的。

但是，您也可以对子级调用 .show() 如果需要，例如：

jQuery("#topContainer").show().children().show();

Answer 2

我想知道隐藏 #topContainer 的逻辑是否导致了问题。我在这里设置了一个演示来展示 :empty 选择器；但为了使元素被视为空，它甚至不能包含单个空格（文本节点）。

使用您提供的 HTML。我已经在此处设置了一个 演示...在 div 中添加内容，然后重新运行脚本，您可以看到差异。

var container = $('#topContainer'),
    divs = container.find('div'),
    empty = divs.filter(':empty');

if (divs.length == empty.length) {
    // hide container!
    $('#topContainer').hide();
    alert('hidden!');
} else {
    // don't do anything
    alert("don't hide!");
}

Answer 3

$("#topContainer").css("display", "block"); 有效吗？

$("#topContainer").css("background", "red"); 有效吗？

您是否使用过 Firebug 或其他可以显示前后实际 DOM 属性以及规则级联的东西。

我怀疑 #topContainer 正在通过其他方式设置 display，或者页面下方还有另一个带有 #topContainer` 的 div（这将是无效的 HTML） 。

Answer 4

我的问题不同，情况略有不同，尽管

脚本是在 DOM 创建要隐藏的元素之前放置的。

我将脚本更改为“页面加载后”

$(function(){
   // logic
});