使用 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);
});

Answer 2

嘿，看看这个垃圾箱：https://jsbin.com/wiqapadeza/edit?html,js,output 我已使用 margin 属性来解决您的问题：

$(function() {
 var top=0;
 $("button:first").on("click", function() {
    top=top+50;
    $("#target").css("height", "+=50px");
    $("p").css("margin-top", top);
  });
 $("button:last").on("click", function() {
  top=top-50;
    $("#target").css("height", "-=50px");
  $("p").css("margin-top", top);
 });
});

希望对你有帮助：