Question

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

<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）时，所有div s会上升（按照答案2的SlideUp），屏幕不会跟随它们。我想要的答案（答案3）将不可见，我必须向上滚动才能看到它。

这是一个例子（问题2是长答案）：https://jsfiddle.net/TB54/1dgchwyw/1/

有没有什么方法可以让屏幕滑动到刚刚关闭的答案？或者至少让屏幕滚动到点击的问题？

Answer 1

如果您设置min和max-height，只需将overflow设置为自动，您的代码就可以正常工作。滚动一个长答案可能是最好的痛苦，所以如果答案很长，可能最好让它在div内滚动，然后它不会立即出现这么久（也许是令人生畏的！）

查看小提琴https://jsfiddle.net/769ohszw/

（我将最小高度设置为20vh，最大值设置为30vh并溢出为自动）

Answer 2

一位朋友向我提出了一个JQuery解决方案，让屏幕滚动到点击的问题。

这是全新的代码（在这个例子中，问题的类是“.exchange_question”，答案的类是“.exchange_answer”）：

$(document).ready(function() {

  /*
   * DURATION ANIM
   */
  var SlideOfTheText = 500;
  var ScrollToTheQuestion = 500;

  // target the questions and answers
  var question = $('.exchange_question');
  var answer = $('.exchange_answer');

  // hide the loaded content
  answer.hide();

  // handler 
  $(question).on('click', clickHandler.bind(this));

  // fn click
  function clickHandler(event) {
    var currentQuestion = event.currentTarget;
    var currentAnswer = $(currentQuestion).next();

    // at click, we first hide all
    hiddenAnswer(answer);

    // if the clicked div is hidden
    if (currentAnswer.css('display') == 'none') {
      showAnswer(currentAnswer, currentQuestion);
      //if not, we hide it
    } else {
      hiddenAnswer(currentAnswer);
    }
  }

  // fn show
  function showAnswer(currentAnswer, currentQuestion) {
    // we make them all slide up
    $(currentAnswer).slideDown(SlideOfTheText, function() {

      $('html, body').animate({
        scrollTop: $(currentAnswer).offset().top - $(currentQuestion).height() - 50
      }, ScrollToTheQuestion);

    });
  }

  // fn hide
  function hiddenAnswer(currentAnswer) {
    // we make them all slide up
    $(currentAnswer).slideUp();
  }

});

Exemple here

它并不完美（它不会同时发生：首先问题打开，然后屏幕跟随......），它需要稍微缓和一点easyInOut，但它有效！

如何使屏幕跟随Slidetoggle

2 个答案: