javascript - 如何部分显示 Div 并在单击时显示完整

Question

我想要一个 css 选项 目前我正在使用这个 css 类

.a{
   top:-102px;
   height: 140px !important;
}

.b{
   top:0px;
   height: 240px !important;
}

但这是从上到下打开 div，我希望它从下到上打开

任何人都可以帮助它非常重要 提前致谢

Answer 1

1. 您需要将您的 div 包装在另一个 div 中
2. 给父 div position:relative
3. 给 child div position:absolute
4. 使用 bottom:0 锚定子 div

演示 1 使用最少的 JavaScript:

• classList.toggle()

演示 2 仅使用 CSS:

• <label>和 <input type='checkbox'> “触发”需要

演示 1(纯 JavaScript)

var x = document.querySelector('.x');

x.addEventListener('click', function(e) {
  this.classList.toggle('b');
});

.y {
  position: relative;
  height: 240px;
  width: 50px;
  background: brown;
}

.x {
  position: absolute;
  height: 140px;
  width: 50px;
  background: red;
  bottom: 0;
  transition: height .5s ease;
}

.b {
  height: 240px;
  transition: height .5s ease;
}

<div class='y'>
  <div class='x'>Click the Red</div>
</div>

演示2(纯CSS)

.y {
  position: relative;
  height: 240px;
  width: 50px;
  background: brown;
}

.x {
  position: absolute;
  height: 140px;
  width: 50px;
  background: red;
  bottom: 0;
  transition: height .5s ease;
}

#chx {
  display: none
}

#chx:checked+.y .x {
  height: 240px;
  transition: height .5s ease;
}

<input id='chx' type='checkbox'>
<div class='y'>
  <label for='chx'>
  <div class='x'>Click on the Red</div>
  </label>
</div>