单击时可向上扩展的 Div

Question

我有这两个可扩展的 div：https://jsfiddle.net/ar0j4508/31/

<div class="container_one">
    <div class='header'></div>
    <div class='container_two'>
        <div class='title show'>From 4 to 0</div>
        <div class="text hide"><br>4<br>3<br>2<br>1<br>0<br></div>
    </div>
</div>

我需要知道：
1) - 如何在点击时自动显示所有包含的文本；
2) - 如何在不扩展另一个的情况下扩展一个 div。谢谢

Answer 1

对于第一个如何在点击时自动显示所有包含的文本 - 您可以通过将 container_two div 的高度增加 text div

的高度来实现

对于第二个如何在不扩展另一个的情况下扩展一个 div - 您可以通过为 click 事件所在的特定 divs 执行脚本部分来做到这一点像这样使用 `$(this) 关键字触发

$(document).ready(function() {
  $(".show").click(function() {
    var $par = $(this).parent(".container_two");
    if ($par.attr('vis') == 'show') return;
    $par.parent(".container_one").find(".header").animate({
      height: '-=' + $par.find(".text").height()
    })
    $par.animate({
      height: '+=' + $par.find(".text").height()
    });

    $par.attr('vis', 'show');
  })

  $(".hide").click(function() {
    var $par = $(this).parent(".container_two");
    if ($par.attr('vis') == 'hide') return;
    $par.animate({
      height: '-=' + $par.find(".text").height()
    });
    $par.parent(".container_one").find(".header").animate({
      height: '+=' + $par.find(".text").height()
    })
    $par.attr('vis', 'hide');
  })
})

.header {
  width: 250px;
  height: 400px;
  max-height: 400px;
}

.container_one {
  width: 200px;
  border: 2px solid black;
  margin: 0 auto;
  float: left;
}

.container_two {
  height: 30px;
  overflow: hidden;
}

.title {
  background: #0f0;
  text-align: center;
  font-size: 30px;
}

.text {
  background: #0f0;
  text-align: center;
  font-size: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container_one">
  <div class='header'></div>
  <div class='container_two'>
    <div class='title show'>From 4 to 0</div>
    <div class="text hide"><br>4<br><br>4<br>3<br>2<br>1<br>0<br></div>
  </div>
</div>

<div class="container_one">
  <div class='header'></div>
  <div class='container_two'>
    <div class='title show'>From 8 to 0</div>
    <div class="text hide"><br>8<br>7<br>6<br>5<br><br>4<br>3<br>2<br>1<br>0<br></div>
  </div>
</div>

为什么我将 max-height:400px; 添加到 header class- 这是因为当您隐藏内容时，您会根据文本的高度增加 div 的高度如果文本的高度超过 400px，那么隐藏 header 的高度将增加，这将导致两个 div 的 non-allignment（当你显示第二个 div 然后隐藏那个 div.Try 没有 max-height)

单击时可向上扩展的 Div

Divs expandable upward on click

html

expand

click