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

所以目前，我在一个函数中使用jQuery，当单击某个切换按钮时，该函数将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并完全隐藏其内容，而不使用循环之类的东西？

尝试添加

溢出：隐藏

---

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

您可以使用CSS属性“overflow”，以便剪裁div的内容

.my_div { overflow: hidden; }

使用过渡时，您还可以使用“不透明度”样式隐藏内容：

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

---

这将平滑地淡出内容。

使用jQuery隐藏容器的子级：

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

---

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。看看你有没有已经尝试过的代码？如果是这样，您应该将其包含在问题中。添加溢出：隐藏到父div。