Question

所以目前，我在一个函数中使用jQuery，当单击某个切换按钮时，div会将div减少到20px。我希望div中的所有div都隐藏起来，但是如果可能的话，我不想诉诸递归函数/循环。目前，我的切换按钮有点起作用，但是当我隐藏div时，它的所有子节点（如果有的话）都保持原样。我可以简单地将高度强制为20px并使所有包含的div也消失吗？我需要的一个很好的例子就是在板上隐藏注释链（例如reddit）。感谢。

当然，代码：

function toggleComment(child)
{
    if (child.innerHTML.includes("–"))
    {
        //Minimizing
        child.innerHTML = "[+]";
        $(child).parent().addClass("minimized");
        hideChildren($(child).parent());
    }
    else
    {
        //Maximizing
        child.innerHTML = "[–]";
        $(child).parent().removeClass("minimized");
        showChildren($(child).parent());
    }
}

function hideChildren(parent)
{
    for (var i = 0; i < parent.children().length; i++)
    {
        var child = parent.children().eq(i);
        if (!child.hasClass('ignoreOnHide'))
        {
            parent.children().eq(i).hide();
        }            
        if (child.has("div"))
        {
            hideChildren(child);
        }
    }
}

function showChildren(parent)
{
    for (var i = 0; i < parent.children().length; i++)
    {
        var child = parent.children().eq(i);
        parent.children().eq(i).show();
    }
}

此代码部分有效。它在视觉上按预期运行，但是会出现更复杂的问题。我不想使用递归函数和循环，因为它再次没有完全按预期工作。确切的问题很难解释，与这个问题无关。有没有其他方法可以解决这个问题，最小化div并完全隐藏其内容，没有循环＆amp;这样？

Answer 1

尝试添加

overflow: hidden;

到父div以隐藏位于其宽度/高度之外的元素。

Answer 2

您可以使用CSS属性＆＃39; overflow＆＃39;这样div的内容就会被剪掉。

.my_div { overflow: hidden; }

使用过渡效果，您也可以使用“不透明度”隐藏内容。式：

.my_div > * { opacity: 1; transition: opacity 2s ease; }
.my_div.reduced > * { opacity: 0; }

这会使内容顺利淡出。

Answer 3

使用jQuery隐藏容器的子项：

$('div.container div').fadeOut();

如何最小化div并隐藏包含div？

3 个答案: