2

我试图隐藏一个隐藏<div>在另一个隐藏的内部<div>。我正在使用动画：$("#innerDiv").hide(400)，但是只要隐藏了外部<div>，内部<div>就不会被隐藏，并且稍后在我取消隐藏外部时可见<div>。如果显示外部<div>，则内部<div>会按预期隐藏并带有动画。

当外部隐藏时，我不希望内部<div>隐藏动画，<div>因为那没有意义。但是，我希望<div>至少会隐藏起来，但事实并非如此。

我发现更改 javascript 可以$("#innerDiv").hide()解决问题，但会删除我希望在外部<div>可见时出现的动画。

这是一个演示问题的 jsFiddle。如果先单击“显示”按钮，然后单击“隐藏”按钮，则文本会像我期望的那样以动画形式消失。但是，如果您先单击“隐藏”按钮，然后单击“显示”按钮，文本仍然会出现。我希望它被隐藏（因为我使用了该.hide()功能。）。

为什么会发生这种情况，有没有办法在外部<div>可见时保留动画，但.hide(400)在外部隐藏时实际隐藏元素<div>？

4

2 回答 2

1

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

display : none

隐藏文档

于 2012-07-24T17:46:31.313 回答
1

您可以编写一个片段来根据父级是否隐藏来切换动画：

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

编辑：进一步解释 parents(...) 选择器

您还可以将 .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);
     }
}
于 2012-07-24T19:00:58.360 回答