如何部分显示Div并单击显示它已满

Question

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

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

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

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

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

Answer 1

1. 您需要将div包装在另一个div中
2. 提供父div [{1}}
3. 给孩子div position:relative
4. 使用position:absolute
锚定子div

演示1使用最少的JavaScript：

• bottom:0

演示2仅使用CSS：

“li”需要
• classList.toggle()和<label>

演示1（普通JavaScript）

<input type='checkbox'>

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

演示2（纯CSS）

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

.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;
}

Answer 2

你可以在主div中放一个div。并给它overflow: hidden;

<强> HTML

<div class='main_div'>
    <div class='overlay_div'>
    </div>
</div>

<强> CSS

.main_div{
    height: 240px;
}

.overlay_div{
    height: 140px;
    overflow: hidden;
}

<强>的Javascript

$('.overlay_div').click(function(){
    $('.overlay_div').css({'overflow': 'visible'});
});

Answer 3

为什么不尝试这样的事情？

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

和jquery

$('.a').click(function(){
    $('.b').show('fast');
})

Answer 4

请检查以下解决方案。我希望这会对你有所帮助。

$('.a').click(function(){
  $(this).toggleClass('b');
})

.a{
   position:absolute;
   top:100px;
   height: 50px !important;
   border:1px solid red;
   transition-property: all;
	 transition-duration: .5s;
}

.b{
   top:0px;
   height: 150px !important;
   border:1px solid red;
   transition-property: all;
	 transition-duration: .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">Hello World!</div>

Answer 5

您无法使用CSS处理click。你必须为此添加JavaScript。 我为hover

制作了示例代码

这是

<div class="wrapper">
  <div class="face">Face</div>
  <div class="back">Back</div>
</div>

造型

.wrapper {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.wrapper:hover .face {
  margin-top: -100%;
}

.face, .back {
  height: 100%;
  transition: margin ease 0.2s; 
}

.face {
  background-color: yellow;
}

.back {
  background-color: orange;
}

这是您的CodePen： https://codepen.io/AbuMuslim/pen/GvEwYz

您可以使用以下JS：

document
  .querySelector('.wrapper')
  .addEventListener('click', function() {
    this.classList.toggle('active');
  });

而不是使用hover选择器，我们更改为.active，如下所示：

.wrapper.active .face {
  margin-top: -100%;
}

以下是CodePen：https://codepen.io/AbuMuslim/pen/QMgJVw