javascript - 如何让屏幕跟随Slidetoggle

标签 javascript jquery slidetoggle slideup

我有一个问题/答案列表 div:当我通过单击问题打开答案时，所有其他答案都会关闭。

<div class="question">
  QUESTION 1
</div>

<div class="answer">
  ANSWER 1
</div>

<div class="question">
  QUESTION 2
</div>

<div class="answer">
  ANSWER 2
</div>

(etc.)

为此，我使用了 javascript 代码 found on Stackoverflow ，效果很好:

$(document).ready(function() {
  var $answers = $('.answer');
  $(".question").click(function() {
    var $ans = $(this).next(".answer").stop(true).slideToggle(500);
    $answers.not($ans).filter(':visible').stop(true).slideUp();
  })
});

我的问题:如果打开的答案之一(假设答案2)真的很长，高度很大，当我点击下一个问题(问题3)时，所有的 divs 将上升(跟随答案 2 的 SlideUp)，并且屏幕不会跟随它们。而我想要的答案(答案3)将不可见，我必须向上滚动才能看到它。

这里是一个例子(问题 2 是长答案):https://jsfiddle.net/TB54/1dgchwyw/1/

有什么办法可以让屏幕向上滑动并显示刚刚关闭的答案吗？或者至少让屏幕滚动到单击的问题？

最佳答案

如果您设置 min 和 max-height，并且只需将 overflow 设置为 auto，您的代码就可以正常工作。在最好的情况下，滚动浏览长答案可能会很痛苦，因此，如果答案很长，最好让它在 div 内滚动，这样它就不会立即显得那么长(并且可能令人生畏!)

看看 fiddle https://jsfiddle.net/769ohszw/

(我将最小高度设置为 20vh，最大高度设置为 30vh，溢出设置为自动)

关于javascript - 如何让屏幕跟随Slidetoggle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46266905/