Warum wird Jquery .show() den Anker-DIV nicht innerhalb der Bootstrap-Akkordeon-Einblendung anzeigen?

Question

Ich bin ziemlich neu in Web-Entwicklung. Ich habe mehrere Tage daran gearbeitet (peinlich) und recherchiert alles, was mir einfällt.

Ich benutze Rails 5, Bootstrap 3 und jquery 2.1.3.

Ich habe ein Bootstrap Akkordeon. Innerhalb der verschiedenen Collapse-Content-DIVs möchte ich Links zu Inhalten, die sich im selben Akkordeon befinden, aber einem anderen Collapse-Panel.

Im aktuellen Zusammenbruch Panel habe ich einen Link wie folgt:

<a class="self-link" href="#buried_sub_anchor">Buried Sub Anchor</a> 

In einem anderen Zusammenbruch Panel Ich habe einen Inhalt div wie folgt aus:

<div class="anchor" id="buried_sub_anchor"> 

Mein jQuery-Code, den Klick zu handhaben ist:

$('.self-link').on('click', function() {expandCollapseWithHash(this.hash); }); 

    function expandCollapseWithHash(hash) { 
    var $collapses = $(hash).parents('.collapse'); 
    if ($collapses.length > 0) { 
     var $collapse = $collapses.first() 
     $collapse.collapse('show'); 
    } 
    } 

Wenn die .collapse ('Show') ich erwarte Bootstrap genannt wird, auf magische Weise schließen das aktuelle Panel und öffnen Sie das Ziel. Dann, wenn dieser Übergang erfolgt, erwarte ich das ‚‘ gezeigt Ereignis ausgelöst, die ich so handhaben:

$('.collapse').on('shown.bs.collapse', function() { 
    if (location.hash) { 
     $(location.hash).show(); 
    } 
    }); 

Ich erwarte die .show() rufen Sie die Seite direkt auf dem verankerten zu springen div. Aber keine Würfel.

Um es zusammenzufassen, wenn ich auf den Link Ich möchte klicken:

1. Die aktuelle Panel .collapse ('verstecken')
2. Die Zieltafel ('show')
3. .collapse die Seite zu dem verankerten div in der Zieltafel

Statt zu springen, immer:

1. Das aktuelle Panel ändert sich nicht (d. H. es bleibt gezeigt)
2. Die Zieltafel
3. Die Seite springt an einen neuen Standort zeigen sich aber bei weitem nicht der Anker div Abschnitt gewünschte

Meine Fragen sind:

1. Warum funktioniert der aktuelle Panel-Kollaps? Ich würde erwarten, dass die Bootstrap-Akkordeon-Funktion dies als Ergebnis des Aufrufs $collapse.collapse('show') tun würde.
2. Warum scrollt die Seite nicht zum verknüpften Inhalt?

Here is a fiddle.Zu reproduzieren:

1. Klick auf die "Mehr Details"
2. scroll den ganzen Weg hinunter
3. klicken Sie auf den "Buried Unter Anker" link

Answer 1

Nun, ich steckte darauf und habe endlich eine Lösung. Das einzige, was ich falsch gemacht habe, war diese Linie $(location.hash).show(); benötigt, um stattdessen location.href = location.hash; zu sein.

Das macht es so, dass es springt, um das gewünschte div ganz oben auf der Seite direkt unter dem Header anzuzeigen.

Hier ist die updated fiddle.

Innerhalb, klicken Sie auf den Panel-Header "Weitere Details", klicken Sie dann auf den Link in diesem Bereich (d. H. "Buried Sub Anchor"). Dadurch wird die Kopfzeile "Verschiedenes" erweitert und die Seite direkt zum Div.

Entlang der Reise nahm ich etwas anderes von Wert auf. Wenn die oben erwähnte Codeänderung alles war, was ich gemacht habe (d. H. $(location.hash).show(); ->location.href = location.hash;), würde beim Klicken auf den Link das Zielfenster erweitert und zu der Stelle gesprungen, an die Sie gehen möchten. Aber es würde auch das Panel erweitert/gezeigt, dass Sie gerade gegangen sind.

Der Grund war mir nicht klar, und wird mit dem folgenden Code festgelegt:

$('#accordion .panel-collapse').collapse({ 
    parent: '#accordion', 
    toggle: false 
}); 

ich diesen Code auf this github page gefunden. Es initialisiert die einzelnen Akkordeon-Kollaps-Elemente, weil die Daten api ... faul instanziiert sind, etwas was .collapse ('show') nicht berücksichtigt.

So jetzt in der aktualisierten Fiedel, wenn Sie auf den Link klicken, schließt es das Verlassen Panel, öffnet das Zielfeld und springt die Seite rechts auf das Ziel Div, genau wie ich wollte.

Answer 2

Sie haben zu zwingen, eine scrollTop zu tun Dies.
Ich mag es innerhalb einer animate() machen, die es glatter macht.

Hier sind die einzigen Änderungen, die ich auf Ihre Fiddle gemacht habe:

$('.collapse').on('shown.bs.collapse', function() { 
    if (location.hash) { 
     $(location.hash).show(); 
    } 

    var thisId = $(this).attr("id"); 
    var thisOffsetTop = $("#" + thisId).offset().top; 
    var headerHeight = $(".navbar").height(); 
    var myTitleHeight = $(".container h1").first().height(); 

    console.log(thisId); 
    console.log("thisOffsetTop: " + thisOffsetTop); 
    console.log("headerHeight: " + headerHeight); 
    console.log("MyTitleHeight: " + myTitleHeight); 

    // Animation to scrollTo the right position 
    $('html, body').animate({ 
     scrollTop: thisOffsetTop - headerHeight - myTitleHeight 
    }); 
}); 

Ich ließ alle relevanten console.log() ...
Siehe aktualisiert Fiddle.