点击

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而不扩展另一个div。感谢。

Answer 1

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

的高度来实现

对于第二个如何扩展一个div而不扩展另一个 - 您可以通过使用`$（对于触发divs事件的特定click执行脚本部分来执行此操作这个关键字像这样

$(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;添加到标题类中 - 这是因为当您隐藏内容时，您将增加div的高度与文本的高度，如果文本的高度超过400px，则隐藏高度标题将增加，这将导致两个div的非对齐（当你显示第二个div然后隐藏div.Try没有max-height时会发生这种情况）