Question

我有一个包含两个部分的简单网站。理想情况下，顶部的部分将以特定尺寸加载，但随后单击位于此部分底部的按钮，该部分将增加尺寸以适合屏幕。如果再次单击该部分将恢复其原始大小。

功能应该与此站点上的功能完全相同：

http://www.urbandisplacement.org/map/la

我有几个问题：

通过JQuery / CSS实现此效果的最佳方法是什么？
如何确保按钮固定在增长/缩小div的底部并按div移动？

我已经尝试使用JQuery在单击按钮时重置顶部div的高度，但是当使用它时，这既没有动画也没有将按钮保持在div的底部。

谢谢！

Answer 1

这是一个简单的CSS版本：

https://jsfiddle.net/otenf0fy/

body,#wrapper {
  height: 100%;
}
#expand {
  display: none;
}
#top {
  background: black;
  color: white;
  padding: 1em;
  position: relative;
}
label {
  background: blue;
  color: white;
  border-radius: .5em;
  padding: 1em;
  display: block;
  width: 5em;
  text-align: center;
  cursor: pointer;
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>

使用JQuery / CSS动画增加div的大小

1 个答案: