显示div的一部分

Question

我希望有一个div显示在它的顶部（如50px哦高度）和div的其他（底部像100px）部分应该由jquery.show（）或其他东西显示。有谁知道怎么做？

Answer 1

您可以将div高度设置为50px固定，点击后您可以将高度更改为自动每javascript / jQuery，或将其从auto恢复为50px。

CSS：

.mydiv{
  height:50px;
  min-height:50px;
  overflow:hidden;
}

jQuery的：

$("document").ready(function(){
  $(".mydiv").click(function(){
    if($(".mydiv").css("height")!="50px"){
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").slideUp();
    }
  }
}

Answer 2

我将内容嵌入<div id="foo" style="height: 50px; overflow:hidden">。然后用JQuery控制这个元素的高度：

$("#foo").css("height", whatever);

Answer 3

HTML：

<div id='example'>some content here</div>

CSS：

#example {height: 50px; overflow:hidden;}

jQuery的：

$('#example').click(function(){
    $(this).animate({ height: 500px; }, 250);
}

Answer 4

您可以将div的高度设置为您希望它从开始（50px）到CSS的高度。设置overflow: hidden;以隐藏其余内容。

之后，您可以执行以下操作来显示整个元素：

$("#id-of-element-to-click-to-show-entire-div").click(function(){
   $(this).slideDown("fast");
});