javascript - 这里如何使用Jquery滑动切换？

Question

我这里有这段代码:

$(document).ready(function () {
  $(".toggle").click(function () {
    //$(".readmore").slideToggle();
    $(".readmore").toggle();
    $(this).text(function(){return $('.readmore:visible').length?'Read less':'Read more'});
  }).triggerHandler('click');
});

我想要点击“阅读更多”时有一个滑动切换效果，但是一旦我用滑动切换替换切换，它就停止工作。请问有什么想法吗？

Answer 1

.toggle(): with no parameters simply toggles the visibility of elements

相反，.slideToggle()需要动画时间才能完成。这意味着您需要使用 complete 回调:动画完成后调用的函数。

因此，当您在slideToggle之后测试可见性时，它不起作用，因为该值仅在超时后更改，而使用toggle它很快就会更改。由于这种延迟，您需要等待动画完成才能执行代码。

在下面的代码片段中:

$(".toggle").on('click', function (e) {
    $(this).nextAll(".readmore:first").slideToggle(400, function() {
        $(e.target).text($('.readmore:visible').length?'Read less':'Read more');
    });
});

$(".readmore").toggle();
$('.toggle').text($('.readmore:visible').length?'Read less':'Read more');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button class="toggle">Read more</button><br/>
<div class="readmore">
blah blah blah
</div>
<button class="toggle">Read more</button><br/>
<div class="readmore">
blah blah blah
</div>