Question

我希望这个div从上到下折叠。我怎样才能做到这一点？我试图在增加高度的同时向上移动，但结果会立即增加高度。

＆＃13;

var div = document.getElementById("div");

div.onmouseover = function(){
      div.className = "expand";
  }
div.onmouseout = function(){
    div.className = "";
  }

＆＃13;

div{
  position:absolute;
  top:50%;
  left:50%;
  height:50px;
  width:100px;
  background-color:#000000;
  transition:height 0.3s;
  }
div.expand{
  position:absolute;
  top:50%;
  left:50%;
  height:100px;
  width:100px;
  background-color:#000000;
  transition:height 0.3s;
  }

＆＃13;

<div id="div"></div>

＆＃13;

Answer 1

你可以这样做，那就是你需要声明底部位置而不是顶部位置。

＆＃13;

var div = document.getElementById("div");

div.onmouseover = function() {
  div.className = "expand";
}
div.onmouseout = function() {
  div.className = "";
}

＆＃13;

div {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 50px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}

div.expand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  background-color: #000000;
  transition: height 0.3s;
}

＆＃13;

<div id="div"></div>

＆＃13;

Answer 2

为此你可以使用jQuery函数。这使代码更易读，更容易调试。

用于扩展

var makeBigger=50;
$("#div").css("width","+="+makeBigger);

缩短

$("#div").css("width","-="+makeBigger);

这会使当前值增加50。

如何增加相反方向的高度？

2 个答案: