0
我問了一段時間的問題，關於如何正確地做我的CSS/HTML，所以我可以根據我有一個圖像做一個圓角的部件。該問題的答案爲here，該解決方案效果很好。如何更改我的CSS，使我的小部件在試圖「最小化」它們時不會互相重疊？
窗口小部件看起來就像我希望他們： 
它們的基本結構是：
<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>
的CSS：
.widget-nw
{
background-image: url('images/widget-top-left.png');
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
height: 28px;
width: 6px;
z-index: 2;
}
.widget-ne
{
background-image: url('images/widget-top-right.png');
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
height: 28px;
width: 6px;
z-index: 2;
}
.widget-sw
{
background-image: url('images/widget-bottom-left.png');
background-repeat: no-repeat;
position: absolute;
bottom: 0;
left: 0;
height: 28px;
width: 6px;
z-index: 2;
}
.widget-se
{
background-image: url('images/widget-bottom-right.png');
background-repeat: no-repeat;
position: absolute;
bottom: 0;
right: 0;
height: 28px;
width: 6px;
z-index: 2;
}
.widget-w
{
background-image: url('images/widget-middle-left.png');
background-repeat: repeat-y;
position: absolute;
left: 0;
height: 100%;
width: 6px;
z-index: 1;
}
.widget-e
{
background-image: url('images/widget-middle-right.png');
background-repeat: repeat-y;
position: absolute;
right: 0;
height: 100%;
width: 6px;
z-index: 1;
}
.widget-n
{
background-image: url('images/widget-top-middle.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
height: 28px;
width: 100%;
z-index: 1;
}
.widget-s
{
background-image: url('images/widget-bottom-middle.png');
background-repeat: repeat-x;
position: absolute;
bottom: 0;
height: 28px;
width: 100%;
z-index: 1;
}
.widget
{
position: relative;
}
.widget-header-title
{
float: left;
font-size: 8pt;
font-weight: bold;
font-family: Verdana, Tahoma, Helvetica;
margin: 8px 0px 0px 10px;
color: #4c3166;
cursor: move;
}
.widget-content
{
padding: 28px 6px;
}
.widget-header-controls
{
float: right;
margin: 6px 10px 0px 0px;
}
.widget-header-control
{
cursor: pointer;
padding-right: 1px;
}
.widget-header-link
{
margin: 6px 0px 0px 10px;
float: left;
}
但是現在，我想使小部件右上角的「向上箭頭」圖標切換使用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不正確地計算我的小部件的高度有關，但我不知道真正改變小部件的簡單方法。我也嘗試過使用animate（）方法並改變高度，但遇到了不知道什麼高度將它展開回到什麼時候才能「最大化」窗口小部件的問題。而且，他們仍然互相滑動。
我該怎麼做才能做到這一點，我可以正確地將我的小部件最小化/最大化，而不需要他們在彼此之間滑動（仍然是動畫）？
試試吧（現場演示）：Here