wake-up-neo.com

Bootstrap-Akkordeon: So vermeiden Sie das Scrollen von Seiten, wenn Sie Elemente ausblenden oder erweitern

Ich habe einen unerwarteten Seiten-Bildlauf, wenn ich versuche, Elemente des Akkordeons zu reduzieren oder zu erweitern. Vielleicht mache ich nur etwas falsch mit dem Bootstrap-Grid-System? Hier ist ein Beispiel für eine Seite: 

Wie kann ich diesen irritativen Effekt vermeiden?
jsfiddle verfügbar 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>
26
Alendorff

Ich hatte dasselbe Problem (beim Klicken auf den Link, der den Kollaps-Umschalter ausgelöst hat, nach oben springen.) __. Der href="#" wurde in href="javascript:void(0);" geändert.

18
Pavol Kolencin

Ersetzen Sie die href-Eigenschaften der a-Elemente durch # und nicht beispielsweise #collapseOne.

an Stelle von:

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

mach das

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

Ich hatte das gleiche Problem. Es stellt sich heraus, dass die href das Problem verursacht. Wenn Sie nicht möchten, dass die Seite beim Einblenden/Erweitern blättert, was ich wollte, entfernen Sie einfach die Datei "href". Wenn ich es als # beließ, blätterte der Bildschirm für mich immer noch nach oben.

hat nicht für mich gearbeitet:

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

hat funktioniert:

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

Hier finden Sie mein Update: https://jsfiddle.net/Lfwvtyms/5/

8
Simmy

Ich hatte das gleiche Problem und fand meine Lösung mit dieser Antwort in einem anderen Beitrag. 

Außer diesem winzigen Stück Javascript, das zu meiner benutzerdefinierten .js-Datei hinzugefügt wurde, funktionierte nichts anderes. Dadurch wird der Fokus problemlos auf den ausgewählten Feldtitel zurückgesetzt. Das einzige, was ich an mein Design anpasste, war der Abstand nach oben in Zeile 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

Eine andere Option ist die Verwendung von Schaltflächen anstelle von Ankerverknüpfungen, so dass zunächst keine href ausgelöst wird. Zum Beispiel anstelle des ersten <a>:

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

Es gibt viele Beispiele, die <button> anstelle von <a> in dieser Dokumentation verwenden.

2
jtenclay

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

Dies würde auf jeden Fall funktionieren, wenn Sie keine Optionen haben.

0
thebrownkid

Sie können den Click-Handler überschreiben und die preventDefault()-Methode für das Click-Ereignis verwenden:

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

Wobei der 'aHandler' eine Klasse in Ihren 'a'-Tags ist: <a class="aHandler" ...>...</a> oder ein anderer gültiger jquery-Selektor .

0
user2812481