Question

我制作的div会在点击时扩大其高度。我尝试了一些我在这里找到的方法，但对我来说没有用。

＆＃13;

jQuery('.readMore').click(function() {
  jQuery(this).parent().toggleClass('rm-cont-hidden');
});

＆＃13;

.rm-container {
  float: left;
  width: 100%;
  background: #f7f7f7;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  color: #777;
}

.rm-text {
  float: left;
  width: 100%;
}

.rm-container.rm-cont-hidden .rm-text {
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.rm-container .rm-text {
  max-height: auto;
  transition: max-height 0.3s ease-in;
}

.readMore {
  float: left;
  width: 100%;
  color: blue;
  text-align: center;
  padding: 5px 0px 0px 0px;
  font-size: 16px;
}

.readMore:hover {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4">


      <div class="rm-container rm-cont-hidden">

        <div class="rm-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div class="readMore">
          +
        </div>

      </div>


    </div>
  </div>
</div>

＆＃13;

我希望div能够打开/扩展＆＃34;转型。

Answer 1

toggleSlide（）

使用jquery滑动动画可用于展开和折叠功能，或者可替代地使用slideUp（）或slideDown（）（顺便说一句，这是一个漫长的过程）

Answer 2

您无法使用auto高度/宽度进行过渡。获得结果的最简单方法之一是设置精确值以使用转换为其设置动画。检查此link以获取更多详细信息以及获取输出的其他选项。请查看下面的代码段以供参考。

＆＃13;

jQuery('.readMore').click(function() {
  jQuery(this).parent().toggleClass('rm-cont-hidden');
});

＆＃13;

.rm-container {
  float: left;
  width: 100%;
  background: #f7f7f7;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  color: #777;
}

.rm-text {
  float: left;
  width: 100%;
}

.rm-container.rm-cont-hidden .rm-text {
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.rm-container .rm-text {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

.readMore {
  float: left;
  width: 100%;
  color: blue;
  text-align: center;
  padding: 5px 0px 0px 0px;
  font-size: 16px;
}

.readMore:hover {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4">


      <div class="rm-container rm-cont-hidden">

        <div class="rm-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div class="readMore">
          +
        </div>

      </div>


    </div>
  </div>
</div>

＆＃13;

单击展开div并进行转换

2 个答案: