Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

这应该有用。

0.0...1.0

Answer 2

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

$(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);
 });
});

我希望它可以帮到你：

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

2 个答案: