Портлет пользовательского интерфейса jquery (сортируемый)

Question

В соответствии с примером кода JQuery для сортируемых портлетов функция минимизации уже существует. Я добавил сортируемую функциональность, и она работает, но не так, как ожидалось. После изменения размера портлета кнопка свертывания скрывает только текст и не переключает границу портлета.

Это мой код:

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"});

$ (". portlet"). addClass ("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find (". portlet-header").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();

Есть идеи? Как я уже сказал, после изменения размера кнопка минимизации просто скрывает содержимое и не переключает границу соответствующего портлета. благодарю вас

Answer 1

На тот случай, если кто-нибудь еще наткнется на эту проблему (я сталкивался с этим вопросом ранее, и Google не сильно помогает запретить этот одинокий неотвеченный пост), трюк состоит в том, чтобы изменить размер родительской панели.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();
    }
});

Надеюсь, что это помогает любому, все еще гуглящему это!