jquery - 只显示 div 的一部分

Question

我想要一个 div，它只显示它的顶部（如 50px 哦高度），而 div 的其他（底部如 100px）部分应该由 jquery.show() 或其他东西显示。有谁知道该怎么做？

Answer 1

您可以将 div 高度固定为 50 像素，单击时您可以根据 javascript/jQuery 将高度更改为自动，或将其从自动恢复为 50 像素。

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