Accordéon Bootstrap: Comment éviter le défilement de la page lors de l'effondrement ou de développer des éléments

J'ai un défilement de page inattendu lorsque j'essaie de réduire ou d'étendre des éléments de l'accordéon. Peut-être que je fais juste 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>
24
demandé sur Alendorff 2015-03-11 05:21:27

7 réponses

J'ai eu le même problème (sauter en haut en cliquant sur le lien qui déclenchait la bascule de réduction) le href="#" a été changé en href="javascript:void(0);" et cela fonctionne très bien (basculer l'effondrement sans faire défiler vers le haut)

16
répondu Pavol Kolencin 2016-02-29 17:13:27

Remplacer les href propriétés sur la a d'éléments de # plutôt que, par exemple, #collapseOne

Au lieu de ceci: 

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

Faites ceci 

<a data-toggle="collapse" data-target="#collapseTwo" href="#"
     aria-expanded="true" aria-controls="collapseTwo">
21
répondu Diego López 2015-03-11 02:44:38

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 lorsque vous réduisez/développez, ce que je voulais, supprimez simplement le href. Laissant comme # encore fait défiler l'écran vers le haut pour moi.

N'a pas fonctionné 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
répondu Simmy 2015-08-30 14:30:12

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é sauf pour ce petit morceau de Javascript ajouté à ma coutume .fichier js. Il ramène doucement la mise au point au titre du panneau sélectionné. La seule chose que j'ai changé en fonction de 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);
3
répondu elarcoiris 2017-05-23 12:18:07

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ù le 'aHandler' est une classe sur vos balises' a': <a class="aHandler" ...>...</a>, ou est tout autre sélecteur jQuery valide.

0
répondu user2812481 2017-02-20 19:50:40

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

Cela fonctionnerait certainement si vous n'avez plus d'options.

0
répondu thebrownkid 2018-02-07 19:01:45

Une autre option consiste à utiliser des boutons au lieu de liens d'ancrage, de sorte qu'aucun href n'est 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 à l'aide de <button> au lieu de <a> dans cette documentation.

0
répondu jtenclay 2018-04-19 16:53:33