jQuery slideToggle, а затем scrollTop не работает вместе - PullRequest
Новая
       25

jQuery slideToggle, а затем scrollTop не работает вместе

0 голосов
/ 27 ноября 2018

Я пытаюсь закрыть slideToggle в нижней части элемента, а затем прокрутить окно браузера до заголовка над ним.Вот как далеко я дошел.

JavaScript 

jQuery(".closedetails").click(function () {

    $closedetails = $(this);
    $morecontent = $(this).parents(".hotel");      
    // Close more content when clicked
    $morecontent.slideToggle(500, function () {
     if($morecontent.is(":visible")){
        $("html, body").animate({scrollTop: $morecontent.prev(".header").offset().top });
      }      

    });

});

HTML 

<div class="header">
<h3>Hotel header</h3>
</div>

<div class="hotel">
<p>Springhill Suites by Marriott is a 3-star hotel located on the westside of Flagstaff near Northern Arizona University. This modern hotel offers large, stylish rooms with a comfortable seating and desk area. All rooms also include a trundle (pull-out) bed.</p>

<div class="more-container">
<div class="more-header">More details</div>
<div class="more-content" style="display: block;">
<div class="desc"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et sollicitudin est. Nam id dolor mi. Integer nunc arcu, vehicula ac ligula eu, placerat sagittis eros. Duis consequat dolor quis luctus finibus. Nullam vel scelerisque tortor, quis vehicula sapien. Duis id venenatis dolor, nec ultricies quam. Proin faucibus, enim at lacinia aliquet, neque sem convallis arcu, vitae ullamcorper felis metus a nunc. Morbi enim felis, bibendum sit amet lorem a, iaculis tristique tortor. Nunc orci ex, pellentesque non purus sit amet, feugiat malesuada nulla. Mauris vel purus sem. Proin commodo nibh justo, vel interdum erat dignissim interdum. Suspendisse at magna nec est rutrum pretium ac sed turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo risus erat, et ultricies nisl commodo eu. Donec ut pharetra dui.</p>

<p>Donec feugiat lacus sapien, in cursus ex tristique eget. Sed sit amet ipsum leo. Cras aliquam ac nunc sed dapibus. In semper ullamcorper est, tempor ultrices elit fermentum ac. Suspendisse vel eros non mi porta dignissim. Morbi consectetur blandit enim ut finibus. Maecenas viverra lectus vel nisi dignissim, eget ultrices ante ultrices.</p>

<p>Cras eget justo aliquam, rhoncus mauris at, viverra enim. Nam sit amet quam nec mauris pellentesque dictum id a enim. Cras velit nisl, imperdiet a dolor quis, rhoncus tincidunt risus. Donec a orci augue. Suspendisse at augue at mauris bibendum euismod. Sed nec molestie tortor. Etiam nec volutpat dolor. Proin suscipit scelerisque lectus, a eleifend diam gravida eu. Phasellus viverra dolor magna.</p>

</div>
<div class="closedetails">CLOSE MORE DETAILS </div>
</div>
</div>
</div>

http://jsfiddle.net/agileapricot/kEqVc/55/

1 Ответ

0 голосов
/ 27 ноября 2018

Вы получите странный эффект, скользящий вверх, затем снова скользящий в обратном вызове.Вот, пожалуйста ... 

    jQuery(".closedetails").click(function () {
        $closedetails = $(this);
        $morecontent = $(this).parents(".hotel");      
        // Close more content when clicked
        $morecontent.stop(true).slideUp(100,function () {
        $("html, body").stop(true).animate({scrollTop: $morecontent.prev(".header").offset().top }, 300);
    });
...