Wie der Bildschirm dem Slidogogle folgen kann

Question

Ich habe eine Liste von Fragen/Antworten div s: Wenn ich eine Antwort durch Klicken auf eine Frage öffne, werden alle anderen Antworten geschlossen.

<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.) 

Dafür verwende ich einen JavaScript-Code found on Stackoverflow, die großen Werke:

Mein Problem

$(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(); 
    }) 
}); 

: Wenn einer der geöffneten Antworten (let'say die Antwort 2) ist wirklich lang, mit eine sehr große Höhe, wenn ich auf die nächste Frage (die Frage 3) klicke, werden alle div s (nach dem SlideUp von Antwort 2) gehen, und der Bildschirm wird ihnen nicht folgen. Und die Antwort, die ich will (die Antwort 3) wird nicht sichtbar sein, ich muss nach oben scrollen, um sie zu sehen.

Hier ist ein exemple (Frage 2 die lange Antwort ist): https://jsfiddle.net/TB54/1dgchwyw/1/

Gibt es eine Möglichkeit den Bildschirm zu slideUp mit der Antwort zu machen, die geschlossen wurde gerade? Oder zumindest um den Bildschirm auf die angeklickte Frage zu scrollen?

Answer 1

Ihr Code kann gut funktionieren, wenn Sie eine min und max-height, gesetzt und nur die overflow auf auto gesetzt. Durch eine lange Antwort zu scrollen kann im besten Fall ein Schmerz sein. Wenn eine Antwort sehr lang ist, ist es wahrscheinlich besser, sie innerhalb des div zu scrollen, dann erscheint sie nicht sofort so lang (und vielleicht entmutigend!)

Check out (habe ich die min-height auf 20vh, max 30vh und Überlauf zu auto) die Geige https://jsfiddle.net/769ohszw/

Answer 2

ein Freund schlug mir eine JQuery-Lösung auf den Bildschirm blättern, um das Klick Frage zu machen.

Hier ist der volle neue Code (in diesem Beispiel ist die Klasse der Frage ".exchange_question" und die Klasse der Antworten ist ".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

Es ist nicht perfekt (es passiert nicht zur gleichen Zeit: zuerst öffnet sich die Frage, dann folgt der Bildschirm ...), und es muss mit etwas easyInOut weich werden, aber es funktioniert!