web-dev-qa-db-fra.com

Bootstrap 3 développe l'accordéon à partir d'une URL

À l’aide de Bootstrap 3, j’essaie d’utiliser des liens d’ancrage de sous-navigation (par exemple, index.php # wnsh) pour développer un accordéon spécifié et ancrer la page au contenu. J'ai essayé de chercher des exemples mais avec un peu de chance, probablement parce que ma structure en accordéon est différente de celle de l'exemple BS3. Voici mon HTML:

METTRE À JOUR:

Quelques modifications ont été apportées au code, mais cela n'ouvre toujours pas l'accordéon spécifié par le hachage. Des pensées supplémentaires?

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

Merci d'avance. Toute aide serait appréciée.

javascripthashtwitter-bootstrap-3anchoraccordion
11
robotsmeller

J'ai rencontré le même problème il y a quelques minutes à peine. La solution semble être simple: vous devez analyser unURLet ajouter la classe in à un accordéon compatible, en utilisant son id :

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

Testé et fonctionnant dans Bootstrap 3.1.1.

16
Ilia Rostovtsev

Testé et fonctionnant dans 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>
14
Thiago Montini

J'utilise cela dans Yii2 avec le widget Collapse. Attribuez un identifiant à vos panneaux.
Si vous avez du HTML simple, vous pouvez simplement ajouter un identifiant à votre a-tag et mettre à jour le sélecteur.

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

Juste une réponse, à Ilia R's. Sa solution a très bien fonctionné! La seule chose, cependant, était que le style du titre du panneau n'était pas mis à jour (la classe .collapsed devait être supprimée du lien du titre du panneau). Quelqu'un a probablement une solution meilleure/plus propre, mais voici un début.

        $(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');
            }
        });
0
Ryan Dorn

Pour moi a travaillé:

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