Bootstrap 3 erweitern Sie Akkordeon aus URL

Unter Verwendung Bootstrap 3, ich bin versucht die sub-navigation Anker-links (ie, index.php#wnsh) zu erweitern angegebenen Akkordeon und Anker unten auf der Seite auf den Inhalt. Ich habe versucht, auf der Suche nach Beispielen, aber mit wenig Glück, wahrscheinlich weil meine Akkordeon-Struktur unterscheidet sich von der gegebenen BS3 Beispiel. Hier ist mein HTML:

UPDATE:

Machte ein paar updates für den code, aber es ist noch nicht das Akkordeon geöffnet hat, spezifiziert durch die hash. Weitere Gedanken?

            <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>

var elementIdToScroll =  window.location.hash;

if(window.location.hash != ''){
  $("#accordion .in").removeClass("in");
  $(elementIdToScroll).addClass("in");
   $('html,body').animate({scrollTop: $(elementIdToScroll).offset().top},'slow');
}

Vielen Dank im Voraus. Jede Hilfe würde geschätzt werden.

Vermissen Sie das übergangs-plugin, weil es funktioniert gut für mich. Siehe diese Geige
Transition-plugin ist da. Ich versuche, öffnen Sie einen bestimmten Akkordeon über url, hashtag, so etwas wie Seite.html#cs. Die tatsächliche Akkordeon-Funktionalität funktioniert gut für mich.
Ich denke, man kann schreiben, dass javascript läuft auf der Seite bereit. Können Sie den hashtag verwenden window.location.hash und etwas tun, wie ich getan haben, in der aktualisiert fiddle
Danke für die Antwort @pitamber-tiwari, ich versuchte Ihren code, und obwohl es funktioniert mit der hash-hardcoded, es hat nicht funktioniert mit-Fenster.Lage.hash, noch war das erste Akkordeon öffnen auf die Seite laden.

InformationsquelleAutor robotsmeller | 2014-03-07

16

Ich hatte das gleiche problem, nur wenige Minuten vor. Die Lösung scheint einfach sein - Sie brauchen, um zu analysieren, eine URL und Klasse hinzufügen in zu den matchable Akkordeon, mit seiner id:
```
//Opening accordion based on URL
var url = document.location.toString();
if ( url.match('#') ) {
    $('#'+url.split('#')[1]).addClass('in');
}
```
Getestet und arbeiten in der Bootstrap 3.1.1.
- Das hilft mir, aber ich würde gerne noch etwas hinzufügen: var url = document.Lage.toString(); if ( url.match('#') ) { $('#'+url.split('#')[1]).collapse('show'); } Um die javascript-Effekt.
- Einen bestimmten Grund, wir sind nicht mit window.location.hash?
- Was meinst du mit "um das javascript-Effekt". Was Wirkung?
- Ich bearbeitete die Antwort auf Ihre bootstrap-Weg, dies zu tun. (die bevorzugte Methode IMO)
- Neueste Bootstrap benötigt show, nicht in
InformationsquelleAutor Ilia Rostovtsev

Getestet und arbeiten in der Bootstrap-3.3.5.

<script type="text/javascript">
$(document).ready(function () {
    if(location.hash != null && location.hash != ""){
        $('.collapse').removeClass('in');
        $(location.hash + '.collapse').collapse('show');
    }
});
</script>

InformationsquelleAutor Thiago Montini

1

Ich bin mit diesem in Yii2 mit dem Zusammenbruch widget.
Eine id zuweisen Ihrer Platten.

Wenn Sie html können Sie fügen Sie einfach die id Ihres a-tag, und aktualisieren Sie den selector.
```
$(function(){
    var hash = document.location.hash;
    if (hash) {
        $(hash).find('a').click();
    }
});
```
InformationsquelleAutor Ruben

Nur eine Antwort, Ilia R ist. Seine Lösung hat Super funktioniert! Die einzige Sache, obwohl, war, dass die panel-Titel-Stil war nicht aktualisieren (das .brach Klasse benötigt, um entfernt werden aus dem panel-Titel-link), so dass ich gezwickt Ilia R code ein bisschen. Jemand vielleicht eine bessere /sauberere Lösung, aber hier ist ein Anfang.

        $(document).ready(function() {
            var url = document.location.toString();
            if ( url.match('#') ) {
                $('#'+url.split('#')[1]).addClass('in');
                var cPanelBody = $('#'+url.split('#')[1]);
                var cPanelHeading = cPanelBody.prev();
                cPanelHeading.find( ".panel-title a" ).removeClass('collapsed');
            }
        });

InformationsquelleAutor Ryan Dorn

Für mich gearbeitet:

    $(document).ready(function() {
        var url = document.location.toString();
        if ( url.match('#') ) {
            var cPanelBody = $('#'+url.split('#')[1]);
            cPanelBody.find(".panel-title a")[0].click();
        }
    });

InformationsquelleAutor Jafix

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.