我想通过单击一个按钮来显示更多文本。
我该如何制作动画?单击按钮添加一个新的班级。我希望它通过添加新类具有向下滚动的效果。没用我是否必须将类添加到另一个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>

最佳答案

好吧,它不适用于height: auto
您可能需要将其更改为max-height: 0max-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>

关于jquery - jQuery-通过单击按钮动画切换高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46338353/

10-09 19:54
查看更多