折叠并排序 div/列表答案

【问题标题】：Collapse and order divs / list折叠并排序 div/列表
【发布时间】：2011-08-26 17:23:12
【问题描述】：

获得相同效果的最佳方法是什么？here（右侧显示“Nieuws”、“Laatste reacties”等）

是否已经为 jquery 编写了任何“插件”以使我的生活更轻松一些？

【问题讨论】：

标签： jquery list html collapse

【解决方案1】：

简单示例：

http://jsfiddle.net/LVsJs/

使用幻灯片切换。

【讨论】：

谢谢，进展顺利，做了一些修改：jsfiddle.net/LVsJs/1 但是，如何将 head2 移到顶部？，有点像这样，但更简单shopdev.co.uk/blog/sortable-lists-using-jquery-ui

【解决方案2】：

如果您正在考虑折叠面板，那么您可以使用 jQuery 切换功能： http://jqueryui.com/demos/toggle/ 您也可以将其他效果附加到切换功能。

如果您想要该页面上的此类表格，请查看此处： http://jqueryui.com/demos/tabs/ 通过小幅定制，它们看起来与您的示例页面完全一样。

【讨论】：

【解决方案3】：

我不确定插件，但这对 jquery 来说是一件很容易的事情。你基本上使用类似的东西：

<div id="fullbox">
  <div id="header">
     Some Header Text
     <a id="expandcollapselink" href="#">Expand</a>
  </div>
  <div id="body">
     Box Body
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
   $('.expandcollapselink').click(function() {
      if ($('#fullbox').hasClass('.active')) {
         $('$body').hide();
         $('#fullbox').removeClass('.active');
      } else {
         $('#body').show();
         $('#fullbox').addClass('.active');
      }
   });
});
</script>

【讨论】：

如果你愿意，你也可以使用切换功能，但我总是喜欢做一个检查。您还可以通过在 removeClass 下执行 $('.expandcollapselink').text('Collapse') 来更改展开文本，例如折叠。