Bootstrap-data-toggle zusammenbricht div nach dem zweiten Klick nicht die erste

Habe ich die einfaches Beispiel mit Bootstrap und Umschalten divs per click. Hier ist markup:

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

Wenn der Benutzer clixks link mit dem Titel 'Open!' zugrunde liegenden div expandiert oder kollabiert. Div erweitert wird zunächst und, wenn Benutzer auf die erste Zeit hat es keine Wirkung. Dann klickt der Benutzer auf die zweite Zeit, div zusammenbricht.

In der original-Beispiel div ausgeblendet ist zunächst aber möchte ich es geöffnet werden. Wie könnte ich das problem beheben?

InformationsquelleAutor Pupkin | 2016-09-02
  1. 12

    Fügen Sie einfach Klasse "collaspe in' class="accordion-body".

    Überprüfen, Beispiel-code auf CODEPEN

    HTML:

    <div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

    Ich hoffe, dies wird das Problem beheben.
    Genießen Sie 🙂

    • danke!!! es funktioniert
    InformationsquelleAutor Jyoti Pathania
  2. 0
    <div id="collapseOne" class="accordion-body collapse">

    Diese wird es auch in der Nähe von Standard-und öffnen, wenn geklickt

    InformationsquelleAutor Nizamudheen At
  3. 0
    <a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>

<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>

    Dadurch wird es Klapp, aber es zeigt das panel standardmäßig. Wenn Sie klicken Sie auf die minimieren-Schaltfläche, wird es reduzieren Sie das Bedienfeld auf den ersten Klick.

    Bin ich nur hinzufügen, dass diese hier denn wenn jemand sucht, es zu tun oder so. Ich fand diesen link bei der Suche nach Ihrer inverse. Hoffe, es hilft!

    InformationsquelleAutor Blake Neal
  4. 0

    Sollten Sie anrufen bootstrap.min.js zweimal. Stellen Sie sicher, dass Sie den Aufruf von bootstrap-Dateien nur einmal.
    Wenn Sie Bootstrap mit Laravel oder jede Art von Rahmen, Bedenken Sie, dass npm run dev kompiliert bootstrap js Dateien im app.js. Das könnte der Fall sein.

    InformationsquelleAutor Azamat
Schreibe einen Kommentar