我想通过单击一个按钮来显示更多文本。
我该如何制作动画?单击按钮添加一个新的班级。我希望它通过添加新类具有向下滚动的效果。没用我是否必须将类添加到另一个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: 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>
关于jquery - jQuery-通过单击按钮动画切换高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46338353/