Question

我想通过点击按钮来显示更多文字。我怎么能动画这个？我点击按钮添加一个新类。我想通过添加新类来实现向下滚动效果。它不起作用。我是否必须将该类添加到另一个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>

Answer 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>

Answer 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/

希望这会对你有所帮助。

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

2 个答案: