web-dev-qa-db-fra.com

Accordéon bootstrap: comment éviter le défilement de page lorsque les éléments sont réduits ou développés

J'ai un défilement de page inattendu lorsque j'essaie de réduire ou de développer des éléments de l'accordéon. Peut-être que je viens de faire quelque chose de mal avec le système de grille bootstrap? Voici un exemple de page: 

Comment puis-je éviter cet effet irritant?
jsfiddle disponible https://jsfiddle.net/Lfwvtyms/1/ 

<body>
<!--default navbar here-->
<main>
    <h1>Long long long long long long header header header header header header lng lasd lewq j</h1>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div id="task-list">
                    <div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group">

                        <div class="panel panel-default">
                            <div id="headingOne" role="tab" class="panel-heading"><h4 class="panel-title"><a
                                    data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"
                                    aria-expanded="true" aria-controls="collapseOne">First list</a></h4></div>
                            <div id="collapseOne" role="tabpanel" aria-labelledby="headingOne"
                                 class="panel-collapse collapse in">
                                <ul class="list-group">
                                    <li class="list-group-item">Item1</li>
                                    <li class="list-group-item">Item2</li>
                                    <li class="list-group-item">Item3</li>
                                </ul>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div id="headingTwo" role="tab" class="panel-heading"><h4 class="panel-title"><a
                                    data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
                                    aria-expanded="true" aria-controls="collapseTwo">Another list</a></h4></div>
                            <div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo"
                                 class="panel-collapse collapse in">
                                <ul class="list-group">
                                    <li class="list-group-item">Item1</li>
                                    <li class="list-group-item">Item2</li>
                                    <li class="list-group-item">Item3</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div id="someDiv">
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="dummy">Div with fixed height here</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>
<footer class="container-fluid">my footer here</footer>
</body>
htmlcsstwitter-bootstraptwitter-bootstrap-3
26
Alendorff

J'ai eu le même problème (sautez au sommet en cliquant sur le lien qui déclenchait la bascule effondrement) Le href="#" a été changé en href="javascript:void(0);" et fonctionne très bien (basculement en effondrement sans défilement vers le haut)

18
Pavol Kolencin

Remplacez les propriétés href des éléments a par # plutôt que, par exemple, #collapseOne.

au lieu de cela:

<a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
     aria-expanded="true" aria-controls="collapseTwo">

fais ça

<a data-toggle="collapse" data-target="#collapseTwo" href="#"
     aria-expanded="true" aria-controls="collapseTwo">
24
Diego López

J'ai eu le même problème. Il s'avère que le href cause le problème. Si vous ne voulez pas que la page défile du tout quand vous réduisez/développez, ce que je voulais, alors supprimez simplement le href. Le laisser comme # faisait toujours défiler l'écran vers le haut pour moi.

n'a pas travaillé pour moi:

<a data-toggle="collapse" data-target="#collapseOne" href="#SectionOne"></a>
<a data-toggle="collapse" data-target="#collapseOne" href="#"></a>

travaillé:

<a data-toggle="collapse" data-target="#collapseOne"></a>

Voir ma mise à jour ici: https://jsfiddle.net/Lfwvtyms/5/

8
Simmy

J'ai eu le même problème et j'ai trouvé ma solution avec cette réponse sur un autre post. 

Rien d’autre n’a fonctionné, à part ce petit morceau de Javascript ajouté à mon fichier .js personnalisé. Cela ramène en douceur le focus sur le titre du panneau sélectionné. La seule chose que j'ai modifiée pour correspondre à mon design était la distance au sommet, sur la ligne 6.

https://stackoverflow.com/a/38180220/4844273

$('#accordion').on('shown.bs.collapse', function () {

    var panel = $(this).find('.in');

    $('html, body').animate({
        scrollTop: panel.offset().top - 130
    }, 500);
});
5
elarcoiris

Une autre option consiste à utiliser des boutons au lieu de liens d’ancrage, afin que href ne soit pas déclenché en premier lieu. Par exemple, au lieu du premier <a>:

<button data-toggle="collapse" data-target="#collapseOne"
  aria-expanded="true" aria-controls="collapseOne">
  First list
</button>

Il y a beaucoup d'exemples utilisant <button> au lieu de <a> dans cette documentation .

2
jtenclay

$('.panel-group').on('click', function(){ $('html,body').stop(); });

Cela fonctionnerait certainement si vous êtes sur des options.

0
thebrownkid

Vous pouvez remplacer le gestionnaire de clics et utiliser la méthode preventDefault() sur l'événement click:

$('.aHandler').click( function(event) {
    event.preventDefault();
    ...
});

Où 'aHandler' est une classe sur vos balises 'a': <a class="aHandler" ...>...</a>, ou est un autre sélecteur jquery valide .

0
user2812481