jQuery / HTML Extend DIV

Question

我正在使用jQuery来扩展div以显示更多信息（在div中）。但是，当我点击“显示更多”链接时，我该如何制作它以便它也扩展div？

以下是我的项目预览：http://i55.tinypic.com/2uzrtat.png

注意“Solo”框。如果单击“查看更多”链接，如何将其扩展到底部，反之亦然？

- 我的代码 -

$(document).ready(function() {
  $('#slickbox').hide();
 
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(300);
    $('.column').animate({height:1000+'px'});
  });
});

Answer 1

修改

$('#seemore').toggle(
  function(){
      $('#solo').animate({height:700+'px'});
      $(this).html('See Less');
      },
  function(){
      $('#solo').animate({height:500+'px'});
      $(this).html('See More >>');
   });

将700切换到您想要的Solo盒子高度为500，无论原始高度是什么

参见一个工作示例：http://jsfiddle.net/G9z37/4/

Answer 2

我假设你想要一个可折叠的div（默认隐藏，然后点击扩展）。如果是这样，请查看http://jqueryui.com/demos/accordion/中的JQuery UI插件中的Accordion扩展。实施起来也相对简单。如果这不是你想要的，请说出来。

Answer 3

您可以使用jquery toggle API

Answer 4

我不完全确定你在问什么，但如果你想改变div的高度，jQuery有一个高度函数。

$("#solo").height(200);  // or whatever you need

这是你想要的吗？

Answer 5

如果您希望将其恢复到原始高度，您可能希望使用.data（）存储原始高度，并在切换时恢复为原来的高度。

请参阅http://jsfiddle.net/S8yuG/