jQuery - 通过单击按钮来切换动画高度答案

【问题标题】：jQuery - animation toggle height by click on buttonjQuery - 通过单击按钮来切换动画高度
【发布时间】：2017-09-21 16:39:53
【问题描述】：

我想通过单击按钮显示更多文本。我该如何制作动画？我通过单击按钮添加一个新类。我希望它通过添加新类来产生向下滚动的效果。它不起作用。我必须将类添加到另一个 div 吗？还是css错了？谢谢你的帮助。。

$(document).ready(function() {
  const hiddenElement = $('.paragraph-small');
  $('.show-more').click(function(){
    hiddenElement.toggleClass('paragraph-large');
    $(this).toggleClass('active');
  });
});

.paragraph-small {
  max-width: 500px;
  text-align: justify !important;
  margin: 1rem auto 3rem;
}

.hidden-text {
  max-height: 0;
  overflow: hidden;
}

.paragraph-large .hidden-text {
  max-height: 200px;
  overflow: visible;
  transition: all linear 2.5s;;
}


.show-more {
  width: 20px;
  height: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div class="toggle-box">
  <div class="paragraph-small">
    <div class="visible-text">
      <span>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore                     magna aliquyam erat, sed diam voluptua.
      </span>
    </div>
                
    <div class="hidden-text">
      <span>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore e dolore magna aliquyam erat, sed diam voluptua.
      </span>
    </div>
  
    <div class="show-more"></div>
  </div>
</div>

【问题讨论】：

您无法设置动画或过渡到设置为auto 的长度值。请改用以下方法：不要定义height，而是定义max-height。将其设置为零以表示隐藏状态，并将其设置为像10000px 这样高得离谱的值以表示可见状态。这将使它工作:)
@connexo 好的，谢谢！ :) max-height 有效 - 但仅适用于按钮而不适用于文本；/

标签： jquery css

【解决方案1】：

好吧，它不适用于height: auto
您可能希望将其更改为 max-height: 0 和 max-height: 1000px（或您认为不应创建滚动条的任何数字）；但老实说，这不会像你想要的那样顺利（因为max-height，在你按下方块和它实际向上或向下滑动之间会有延迟）

$(document).ready(function() {
  const hiddenElement = $('.paragraph-small');
  $('.show-more').click(function(){
    hiddenElement.toggleClass('paragraph-large');
    $(this).toggleClass('active');
  });
});

.paragraph-small {
  max-width: 500px;
  text-align: justify !important;
  margin: 1rem auto 3rem;
}

.hidden-text {
  max-height: 0;
  overflow: hidden;
  transition: all linear 2.5s;
}

.paragraph-large .hidden-text {
  max-height: 200px;
}


.show-more {
  width: 20px;
  height: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div class="toggle-box">
  <div class="paragraph-small">
    <div class="visible-text">
      <span>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore                     magna aliquyam erat, sed diam voluptua.
      </span>
    </div>
                
    <div class="hidden-text">
      <span>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore e dolore magna aliquyam erat, sed diam voluptua.
      </span>
    </div>
  
    <div class="show-more"></div>
  </div>
</div>

【讨论】：

好的，谢谢 :) 我已经更新了我的 sn-p。但现在只有按钮向下滚动..
@azrm 好的，编辑了我的答案；所以我删除了overflow: visible 并将transition 从paragraph-large .hidden-text 移动到.hidden-text。现在工作更流畅了！

【解决方案2】：

这里有一个解决方案https://jsfiddle.net/azesf25y/

$(document).ready(function() {
  $('.show-more').click(function(){
    $(this).siblings('div.hidden-text').slideToggle('slow');
  });
});

.paragraph-small {
  max-width: 500px;
  text-align: justify !important;
  margin: 1rem auto 3rem;
}

.hidden-text {
  overflow: hidden;
  display:none;
}

.paragraph-large .hidden-text {
  max-height: 200px;
}


.show-more {
  width: 20px;
  height: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-box">
  <div class="paragraph-small">
    <div class="visible-text">
      <span>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </span>
    </div>
                
    <div class="hidden-text">
      <span>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore e dolore magna aliquyam erat, sed diam voluptua.
      </span>
    </div>
  
    <div class="show-more"></div>
  </div>
</div>

CSS中的代码已更改

.hidden-text {
  overflow: hidden;
  display:none;
}

CSS 不需要转换，jQuery slideToggle 会处理它。

JavaScript 中的代码已更改点击时.show-more 会寻找带有div.hidden-text 的兄弟姐妹，并且会慢慢滑动切换。

参考文档：http://api.jquery.com/slidetoggle/

希望这会对你有所帮助。

【讨论】：