javascript - 使用 jQuery 或 javascript 从顶部减少 div 高度

Question

我想做的是，当调用事件时，div #target 的高度从顶部减少/增加，或者顶部内容隐藏/可见到特定大小。我想不出办法。

以下代码从底部减少/增加高度，但我希望它从顶部减少。

$(function() {

  $("button:first").on("click", function() {
    $("#target").css("height", "+=50px");
  });

  $("button:last").on("click", function() {
    $("#target").css("height", "-=50px");
  });
});

#target {
  background: purple;
  color: white;
  height: 300px;
  width: 200px;
}

div {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>PLUS</button>
  <button>MINUS</button>
</div>
<div id="target">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

Answer 1

您必须获取元素的当前高度，然后对其进行任何数学运算，然后设置新的 CSS 值。

附言 它总是从底部开始添加和减少，因为这是浏览器呈现内容的方式。从左上角到右下角。因此，如果您增加或减少高度，它将从底部算起。

这应该有效。

$("button:first").on("click", function() {
    var targ = $("#target"),
          targHt = targ.height(),
          newTargHt = targHt + 50;

    targ.height(newTargHt);
});

$("button:last").on("click", function() {
    var targ = $("#target"),
          targHt = targ.height(),
          newTargHt = targHt - 50;

    targ.height(newTargHt);
});