Bootstrap 3 Erweitern Akkordeon von URL

Question

Mit Bootstrap 3 versuche ich Sub-Navigation Anker-Links (zB index.php # wnsh) zu verwenden, um ein bestimmtes Akkordeon zu erweitern und die Seite runter zum Inhalt zu verankern. Ich habe versucht, nach Beispielen zu suchen, aber mit wenig Glück, wahrscheinlich, weil sich meine Akkordeon-Struktur von dem gegebenen BS3-Beispiel unterscheidet. Hier ist mein HTML:

UPDATE:

machte ein paar Updates für den Code, aber es ist noch nicht das Akkordeon durch den Hash angegeben öffnen. Irgendwelche weiteren 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> 

JS

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äre willkommen.

Answer 1

Ich stieß vor ein paar Minuten auf das gleiche Problem. Die Lösung scheint geradlinig zu sein - Sie brauchen eine URL und Klasse in zum anpassungsfähigen Akkordeon, mit seinem id hinzufügen zu analysieren:

// Opening accordion based on URL 
var url = document.location.toString(); 
if (url.match('#')) { 
    $('#'+url.split('#')[1]).addClass('in'); 
} 

Getestet und Arbeiten in Bootstrap 3.1.1.

Answer 2

Nur eine Antwort, zu Ilia R. Seine Lösung hat super funktioniert! Die einzige Sache war jedoch, dass der Panel-Titel-Stil nicht aktualisiert wurde (die .collapsed-Klasse musste aus dem Panel-Titel-Link entfernt werden), also habe ich den Code von Ilia R ein bisschen verbessert. Jemand hat wahrscheinlich 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'); 
      } 
     }); 

Answer 3

Ich benutze dies in Yii2 mit dem Collapse Widget. Weisen Sie Ihren Panels eine ID zu.
Wenn Sie einfach HTML haben, können Sie einfach eine ID zu Ihrem A-Tag hinzufügen und den Selektor aktualisieren.

$(function(){ 
    var hash = document.location.hash; 
    if (hash) { 
     $(hash).find('a').click(); 
    } 
}); 

Answer 4

Getestet und funktioniert in 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> 

Answer 5

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(); 
     } 
    });