Jquery 如何更改CSS，使我的小部件在尝试“最小化”它们时不会相互重叠？

不久前，我问了一个关于如何正确处理css/html的问题，这样我就可以根据我的图像制作一个完整的小部件。问题得到了回答，解决方案非常有效

这些小部件看起来就像我希望它们：

其基本结构是：

 <div id="widget3" class="widget">
        <div class="widget-top">
            <div class="widget-header">
                <div class="widget-nw"></div>
                <div class="widget-n">
                    <div class="widget-header-title">Demo Widget 3</div>
                    <div class="widget-header-link"><a href="#">Edit</a></div>
                    <div class="widget-header-controls">
                        <span class="widget-header-control"><img src="images/icon-refresh.png" class="widget-refresh" alt="refresh" /></span>
                        <span class="widget-header-control"><img src="images/icon-minimize.png" class="widget-minimize" alt="minimize" /></span>
                        <span class="widget-header-control"><img src="images/icon-close.png" class="widget-close" alt="close" /></span>
                    </div>
                </div>
                <div class="widget-ne"></div>
            </div>
        </div>
        <div class="widget-bottom">
            <div class="widget-body">
                <div class="widget-w"></div>
                <div class="widget-e"></div>
                <div class="widget-content">
                     Demo Widget 3<br />
                     Demo Widget 3<br />
                     Demo Widget 3<br />
                     Demo Widget 3<br />
                     Demo Widget 3
                </div>
            </div>
            <div class="widget-footer">
                <div class="widget-sw"></div>
                <div class="widget-s">
                    <div class="widget-footer-controls">
                        <span class="widget-footer-control">
                        </span>
                    </div>
                </div>
                <div class="widget-se"></div>
            </div>
        </div>
    </div>

然而，现在，我正在尝试使用jQuery使小部件右上角的向上箭头图标切换为最小化/最大化，这样只会显示顶部栏，反之亦然。我正在尝试使用animate或slideUp/slideDown为其设置动画

$(document).ready(function () {
    $('.widget-minimize').click(function () {
        toggleMinimize($(this).parents('.widget').attr('id'));
    });

});


 function toggleMinimize(widgetId) {
        if ($('#' + widgetId + ' .widget-bottom').is(':visible')) {
            $('#' + widgetId + ' .widget-bottom').slideUp();
            $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-maximize.png').attr('alt', 'maximize');
        }
        else {
            $('#' + widgetId + ' .widget-bottom').slideDown();
            $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-minimize.png').attr('alt', 'minimize');
        }
    }

当我尝试最小化/最大化它时，它无法正常工作。我觉得这与jQuery错误地计算我的小部件的高度有关，但我不知道有什么简单的方法可以真正更改小部件。我也尝试过使用动画方法并改变高度，但遇到了一些问题，即不知道在最大化小部件的时候将其展开到什么高度。而且，它们仍然在彼此的顶部滑动

我该怎么做才能使我的小部件正确地最小化/最大化，而不让它们彼此滑动并保持动画效果

试用现场演示：

我做了两个更改[]

我不得不临时更改图像位置，以便它在JS fiddle上工作，只需忽略新的URL即可

首先：我制作了人体高度动画，看看JS，我只更改了最小化/最大化功能

第二：我更改了css的一行以添加溢出：隐藏；添加到.widget内容，这样当我将其设置为高度0时，不会出现任何溢出文本

我这样做的唯一问题是，当你最小化盒子时，它会记住它的高度，这样它就可以回到原来的高度。因此，如果您在内容关闭时更改内容的高度，它将无法正确打开，某些内容将被切断或高度过大。你可以做一些事情，但是首先告诉我这些改变是否对你有帮助

$(document).ready(function () {
    $('.widget-minimize').click(function () {
        toggleMinimize($(this).parents('.widget').attr('id'));
    });

});


 function toggleMinimize(widgetId) {
        if ($('#' + widgetId + ' .widget-bottom').is(':visible')) {
            $('#' + widgetId + ' .widget-bottom').slideUp();
            $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-maximize.png').attr('alt', 'maximize');
        }
        else {
            $('#' + widgetId + ' .widget-bottom').slideDown();
            $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-minimize.png').attr('alt', 'minimize');
        }
    }