hide() und show() bewirkt, dass die Seite sporadisch springt

Ich habe eine Tabelle, die mit Details von Jobs gefüllt ist, nach denen ein Benutzer sucht. Die Struktur ist verwandt wie folgt:hide() und show() bewirkt, dass die Seite sporadisch springt

<div class="container"> 
    <table class="table-responsive table-hover table-bordered col-sm-12 col-md-6 col-md-offset-1 col-lg-6 col-lg-offset-1" id="resultsTable" border="0" cellspacing="0" cellpadding="0"><tbody> 
     <tr class="selectable selected"> 
      <td class="summary">A Summary</td> 
     </tr> 
     <tr> 
      <td class="detail" id="32113607" style="display: table-cell;">This is some detail</td> 
     </tr> 
<!-- And so on ....................... --> 
    </tbody></table> 
</div>

Ich habe dann eine Funktion, die die Erweiterung und das Zurückziehen der Tabellenzeilen behandelt.

$(function() { 

    //When clicking a row in the table, hide the other rows... 
    $("#resultsTable").on('click', '.selectable', function (e) { 
     $(this).addClass('selected').siblings().removeClass('selected'); 
     $(this).siblings().children("td.detail").slideUp(); 

     $(this).next("tr").children("td.detail").slideDown(); 
    }); 
});

Es gibt auch einige grundlegende CSS, aber nichts Wichtiges. Dies ist alles in einer Geige hier: http://jsfiddle.net/v9ec3/1176/

Die seltsame Sache ist, wenn Sie an der Unterseite beginnen und nach oben arbeiten, hat es keine Probleme. Wenn Sie oben beginnen und arbeiten, wird es durch einen der Datensätze springen.

Nachdem wir dies in den Dev-Tools durchgegangen sind, sieht es so aus, als ob jQuery beim Verschieben der Folie hilft.

I haben versucht:

e.preventDefault()
e.stopPropogation()
Einstellung Breite/Höhe
Einstellen Überlauf-y
Animationen (dh gehen id x)
CSS-Übergänge

Quelle

2017-05-01 Reisclef

Es springt nur herum, wenn Sie an einem geöffneten vorbeirollen und den nächsten öffnen. Dies wird natürlich erwartet, da die Seite die aktuelle Bildlaufposition beibehält und Sie nichts getan haben, um sie zu ändern. Von unten funktioniert es, weil es wiederum die aktuelle Scroll-Position, die die Unterseite ist, beibehält. –

@KevinB Ja, das habe ich mir gedacht. Ich kann sehen, warum es versuchen würde, so zu arbeiten. Ich habe versucht, die ID zu verwenden, um die Seite dorthin zu verschieben, aber vielleicht war mein Timing mit dem SlideUp und slideDown im Konflikt. Wie können Sie noch die aktuelle Scroll-Position angeben? Könnte ich die Höhe vor dem SlideUp bekommen, und die Scroll um x Pixel anpassen? Oder verpasse ich gerade etwas, das offensichtlich ist? – Reisclef

etwas wie das: http://StackOverflow.com/Questions/10836428/How-to-maintain-page-Scroll-position-after-a-jquery-event-is-carried-out Sie müssen entscheiden, was um die neue Bildlaufposition festzulegen, sei es die Höhe des Inhalts, den Sie ausblenden, oder eine vorherige Bildlaufposition. Was es weiter erschwert, ist, dass Sie auch mehr Inhalte zeigen. –

Dank Kevin B Link (was ich nicht vorher gefunden hatte), konnte ich herausfinden, was die Elemente in Position zu halten war erforderlich, um:

$("#resultsTable").on('click', '.selectable', function (e) { 

     var prevSelectedHeight = $(".selectable.selected ").next("tr").height(); 
     var currentScrollTop = $(window).scrollTop(); 

     $(this).addClass('selected').siblings().removeClass('selected'); 
     $(this).siblings().children("td.detail").hide(); 

     if (currentScrollTop > prevSelectedHeight) { 
      $(window).scrollTop(currentScrollTop - prevSelectedHeight) 
     } 
     $(this).next("tr").children("td.detail").slideDown(); 
});

Das jetzt für die meisten Fälle funktioniert. Es gibt einige Randfälle, in denen die Seite nach unten gescrollt wird und die Elemente nach oben verschoben werden. Für die überwiegende Mehrheit der Elemente in der Liste funktioniert es jedoch gut.

Quelle

2017-05-01 19:05:11 Reisclef

hide() und show() bewirkt, dass die Seite sporadisch springt

Antwort

Verwandte Themen