Question

我正在尝试隐藏隐藏在另一个<div>内的<div>。我正在使用动画：$("#innerDiv").hide(400)，但只要外部<div>被隐藏，内部<div>就不会被隐藏，以后当我取消隐藏外部{{1}时可见}。如果显示外部<div>，内部<div>将按预期隐藏动画。

当隐藏外部<div>时，我不希望内部<div>隐藏动画，因为这没有意义。然而，我希望<div>至少会被隐藏，而事实并非如此。

我发现将javascript更改为<div>可以解决问题，但是当外部$("#innerDiv").hide()可见时，我会删除我想要的动画。

Here是一个证明问题的jsFiddle。如果先单击“显示”按钮，然后单击“隐藏”按钮，文本将按照我的预期消失。但是，如果先单击“隐藏”按钮，然后单击“显示”按钮，文本仍会显示。我希望它被隐藏（因为我使用了<div>函数。）。

为什么会发生这种情况，并且有一种方法可以在外部.hide()可见时保留动画，但是当外部<div>为.hide(400)时，让<div>实际隐藏该元素隐藏？

Answer 1

您可以使用回调选项手动将内部div css display属性更改为

display : none

hide documentation

Answer 2

您可以编写一个片段来切换动画，具体取决于父级是否隐藏：

var innerDiv = $("#innerDiv");
if(innerDiv .parents("div").is(":visible")){
    innerDiv.hide(400);
}else{
    innerDiv.hide();
}

编辑：进一步解释父母（...）选择

你也可以使用.parents（“...”）调用任何选择器。因此，如果嵌套的div比直接的子级更专用，它仍会冒泡以找到您要检查的目标父级。因此，如果您的父div被命名为id =“outerDiv”，您可以这样做：

$("#innerDiv").parents("#outerDiv").is(":visible")

修改：更一般的解决方法

您也可以为任何元素执行此操作以确定它是否被隐藏（您可以为动画编写自己的自定义插件或只是隐藏，但我会留给您）

$(function(){
     HideOrAnimate($("#whatever"),400);
});

function HideOrAnimate(target, hideTime)
{
     if(target.parents(":hidden").length > 0){
          target.hide();
     }else{
          target.hide(hideTime);
     }
}

Jquery：用动画隐藏隐藏div中的div

2 个答案: