Утраченная позиция прокрутки на JQuery скрыть и исчезнуть - PullRequest
Новая
       5

Утраченная позиция прокрутки на JQuery скрыть и исчезнуть

0 голосов
/ 25 октября 2019

Есть список вопросов на странице, который может быть очень длинным. Я создал небольшой список здесь в примере кода. Пользователь прокручивает вопрос, нажимает на него, и список скрывается, появляются отдельные вопросы. Пользователь читает и нажимает «X», чтобы закрыть его, и исходный список снова появляется в ТО ЖЕ ПОЛОЖЕНИИ (что я хочу, но не получаю).

Проблема заключается в том, что список появляется сверхувместо сохранения позиции прокрутки.

При переходе к показу / скрытию fadeIN / fadeOut с использованием event.preventDefault (), похоже, ничего не меняет.

Код использует Bootstrap 4 /Jquery.
(Увеличьте браузер, чтобы получить полосы прокрутки для тестирования)

Код ниже: 

    //********************************************************************************************************
    //     Clone Question, display on its own, hide existing list of questions
    //********************************************************************************************************     
    $(document).on('click', '[data-name="question"]', function(){
        event.preventDefault();
        var qid = $(this).attr("data-qid");//id of the question being answered        
        //var clone = $(this).clone();//clone entire question element to paste into new space
        var clone = $('#header'+qid).clone();//clone entire question element to paste into new space    
        $('#load_data').hide();
        $(clone).hide().appendTo('#load_single_answer').fadeIn(1000);
        var html = '<div class="container">'+//provide an X button to close the single question display
            '<div class="exit btn btn-light btn-space col-12 box displ text-center align-self-center" style="font-size:120%"><strong>X</strong></div>'+
            '</div>';                    
        $(html).appendTo('#load_single_answer'); 
    });
    //**********************************************************************
    //    Close single question display, bring back the list of questions
    //**********************************************************************
    $(document).on('click', '.exit', function(){
        event.preventDefault();
        //restore all background data
        $('#load_data').fadeIn(500);
        $('#load_single_answer').empty();//clear out single answer data
    });
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color:#f2f2f2;">

    <!-- loading point for displaying single questions and answers -->
    <div class='container' style="max-width:900px;">
        <div id="load_single_answer"></div>
    </div>
 
    <div id="main">
            <!-- Question and Answers loaded here via ajax call -->
            <div id = "dataX" class="container p-0" style="max-width: 900px;">
                <div id="load_data">               
                    <!-- BEGINNING LIST OF QUESTIONS-->
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header165" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="165" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>                    
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header166" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="166" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header167" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="167" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header168" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="168" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header169" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="169" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header170" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="170" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>    
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header171" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="171" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>     
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header172" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="172" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>      
                    <!-- END OF LIST OF QUESTIONS -->
                </div> 
            </div>
    </div>
    </body>

Ответы [ 2 ]

0 голосов
/ 26 октября 2019

Я решил использовать метод прокрутки - при нажатии на вопрос, который нужно отобразить, сохраните положение прокрутки, скройте список, покажите один вопрос. Если нажать «X», чтобы закрыть один вопрос, показать список, очистить держатель одного вопроса, а затем восстановить позицию прокрутки.

Работает как шарм и не испытывает проблем, о которых я писалвыше с форматированием контейнера Bootstrap и проблемами с прокруткой (если это длинный вопрос / ответ) и т. д.

Код ниже: 

    //********************************************************************************************************
    //     Clone Question, display on its own, hide existing list of questions
    //********************************************************************************************************     
    $(document).on('click', '[data-name="question"]', function(){
        event.preventDefault();
        position = $(window).scrollTop();//preserve position of list
        //alert(position);
        var qid = $(this).attr("data-qid");//id of the question being answered        
        //var clone = $(this).clone();//clone entire question element to paste into new space
        var clone = $('#header'+qid).clone();//clone entire question element to paste into new space    
        $('#load_data').hide();
        $(clone).hide().appendTo('#load_single_answer').fadeIn(1000);
        var html = '<div class="container">'+//provide an X button to close the single question display
            '<div class="exit btn btn-light btn-space col-12 box displ text-center align-self-center" style="font-size:120%"><strong>X</strong></div>'+
            '</div>';                    
        $(html).appendTo('#load_single_answer'); 
    });
    //**********************************************************************
    //    Close single question display, bring back the list of questions
    //**********************************************************************
    $(document).on('click', '.exit', function(){
        event.preventDefault();
        //restore all background data
        $('#load_data').fadeIn(500); 
        $('#load_single_answer').empty();//clear out single answer data
        $(window).scrollTop(position); 
    });
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color:#f2f2f2;">

    <!-- loading point for displaying single questions and answers -->
    <div class='container' style="max-width:900px;">
        <div id="load_single_answer"></div>
    </div>
 
    <div id="main">
            <!-- Question and Answers loaded here via ajax call -->
            <div id = "dataX" class="container p-0" style="max-width: 900px;">
                <div id="load_data">               
                    <!-- BEGINNING LIST OF QUESTIONS-->
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header165" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="165" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>                    
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header166" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="166" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header167" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="167" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header168" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="168" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header169" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="169" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header170" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="170" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>    
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header171" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="171" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>     
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header172" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="172" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>      
                    <!-- END OF LIST OF QUESTIONS -->
                </div> 
            </div>
    </div>
    </body>
0 голосов
/ 26 октября 2019

Я бы сделал это, заставив список показывать и скрывать (вместо того, чтобы удалять его), а затем делать вид с одним ответом фиксированным в верхней части области просмотра (вместо добавления в верхней части страницы). Таким образом, положение прокрутки естественно сохраняется без необходимости управлять каким-либо состоянием.

Если вы хотите анимировать скрытие вопросов, вы должны использовать CSS для этого. 

//********************************************************************************************************
//     Clone Question, display on its own, hide existing list of questions
//********************************************************************************************************     
$(document).on('click', '[data-name="question"]', function(){
    event.preventDefault();
    var qid = $(this).attr("data-qid");//id of the question being answered        
    //var clone = $(this).clone();//clone entire question element to paste into new space
    var clone = $('#header'+qid).clone();//clone entire question element to paste into new space    
    $('#load_data').removeClass('fadein').addClass('fadeout')
    $(clone).hide().appendTo('#load_single_answer').fadeIn(1000);
    var html = '<div class="container">'+//provide an X button to close the single question display
        '<div class="exit btn btn-light btn-space col-12 box displ text-center align-self-center" style="font-size:120%"><strong>X</strong></div>'+
        '</div>';                    
    $(html).appendTo('#load_single_answer'); 
});
//**********************************************************************
//    Close single question display, bring back the list of questions
//**********************************************************************
$(document).on('click', '.exit', function(){
    event.preventDefault();
    //restore all background data
    $('#load_data').removeClass('fadeout').addClass('fadein')
    $('#load_single_answer').empty();//clear out single answer data
});
#load_single_answer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
.fadeout {
	opacity: 0;
	transition-duration: .5s;
}
.fadein {
	opacity: 1;
	transition-duration: .5s;
}
<head>
	    <!-- JQuery -->
	    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
	    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   
	    <!-- Bootstrap -->
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color:#f2f2f2;">

    <!-- loading point for displaying single questions and answers -->
    <div class='container' style="max-width:900px;">
        <div id="load_single_answer"></div>
    </div>

    <div id="main">
            <!-- Question and Answers loaded here via ajax call -->
            <div id = "dataX" class="container p-0" style="max-width: 900px;">
                <div id="load_data">               
                    <!-- BEGINNING LIST OF QUESTIONS-->
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header165" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="165" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>                    
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header166" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="166" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header167" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="167" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header168" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="168" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header169" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="169" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header170" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="170" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>    
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header171" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="171" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>     
                    <!-- questions here -->
                    <div data-name="results">
                        <!-- individual question container with DETAILS link  -->
                        <div class="card-header" id="header172" style="border-radius:10px;background-color:white;border:none;">                 
                            <div data-qid="172" data-aid="0" data-name="question" style="cursor: pointer;">
                                <div style="margin-bottom:-7px;">
                                    <h5 style="font-family: &quot;Verdana&quot;, Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
                                </div>                   
                            </div> 
                        </div> 
                        <br>
                    </div>      
                    <!-- END OF LIST OF QUESTIONS -->
                </div> 
            </div>
    </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...