如何使屏幕跟随 Slidetoggle

Posted 2023-02-25

【中文标题】如何使屏幕跟随 Slidetoggle

【英文标题】：How to make the screen follow the Slidetoggle

【发布时间】：2017-09-17 17:28:33

【问题描述】：

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

<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 ***，效果很好：

$(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/

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

【参考方案1】：

如果您设置min 和max-height，您的代码可以正常工作，只需将overflow 设置为自动。在最好的情况下，滚动浏览一个很长的答案可能会很痛苦，所以如果一个答案很长，最好让它在 div 内滚动，然后它不会立即显得那么长（而且可能令人生畏！）

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

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

【讨论】：

谢谢！这是一个很好的备份解决方案，但我宁愿避免使用滚动条。

@TB54 它可能会改善用户体验。考虑到这一点。 :)

【参考方案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

它并不完美（它不会同时发生：首先问题打开，然后屏幕紧随其后......），它需要用一点easeInOut 来软化，但它有效！

【讨论】：

这是我的回答中我的代码的一个非常细微的变化。用滚动条！请接受我的回答。