jquery - 折叠并排序 div/列表

Question

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

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

Answer 1

简单的例子：

http://jsfiddle.net/LVsJs/

使用幻灯片切换。

Answer 2

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

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

Answer 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>