jquery ui portlet（可排序）調整大小並最小化

Question

根據針對可排序Portlet的JQuery示例代碼，最小化功能已存在。我添加了可排序的功能，它確實有效，但並不像預期的那樣。在調整portlet的大小後，「最小化」按鈕僅隱藏文本並且不會切換portlet的邊框。

這是我的代碼：

HTML

<div class="column"> 
    <div class="portlet"> 
    <div class="portlet-header">Calls</div> 
    <div class="portlet-content">test Calls content</div> 
    </div> 
    <div class="portlet"> 
    <div class="portlet-header">Phone</div> 
    <div class="portlet-content">test Phone content</div> 
    </div> 
    <div class="portlet"> 
     <div class="portlet-header">Contacts</div> 
     <div class="portlet-content">test Contacts content</div> 
    </div> 
</div> 

JQUERY

$（ 「.COLUMN」）.sortable（{connectWith：「 .column「，延遲：150，佔位符：」ui-state-highlight 「}）;

$（ 「門戶 」）。addClass（「 UI小部件UI窗口小部件，內容UI輔助-clearfix UI的角落都 」） .find（「 portlet的首部」） .addClass（ 「'ui-widget-header ui-corner-all」） .prepend（''） .end（） .find（「.portlet-content」）;

$(".portlet-header .ui-icon").click(function() 
    {         
    $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");  
    $(this).parents(".portlet:first").find(".portlet-content").toggle(); 
    }); 

    $(".column").disableSelection(); 
    $(".portlet").resizable(); 

任何想法？正如我在調整大小之後所說的，「最小化」按鈕只是隱藏了內容，並且不會切換相應Portlet的邊框。謝謝

Answer 1

爲了防止其他人絆倒這個問題（我早些時候遇到過這個問題，谷歌沒有太多的幫助阻止這個孤獨的未答覆的帖子），訣竅是重新調整父母.portlet面板css。我已經結束了，但我敢肯定有一個更優雅的解決方案：

$(".portlet-header .ui-icon-minusthick").click(function() { 
    if($(this).hasClass("ui-icon-minusthick") == true) 
    { 
     $(this).removeClass("ui-icon-minusthick"); 
     $(this).addClass("ui-icon-plusthick"); 
     $(this).parents(".portlet:first").find(".portlet-content").slideToggle(); 
     $(this).parents(".portlet:first").animate({height: "40px"}, 500); 
    } 
    else 
    { 
     $(this).removeClass("ui-icon-plusthick"); 
     $(this).addClass("ui-icon-minusthick"); 
     $(this).parents(".portlet:first").animate({height: "300px"}, 500); 
     $(this).parents(".portlet:first").find(".portlet-content").slideToggle(); 
    } 
}); 

希望這有助於人還是谷歌搜索吧！