Wie kann festgestellt werden, ob ein Bootstrap-Kollaps öffnet oder schließt?

Lesezeit: 2 Minuten

Benutzer-Avatar
Benutzer1186050

Wenn ich einen Bootstrap-Kollaps habe, wie kann ich anhand eines Klickereignisses feststellen, ob der Kollaps geöffnet oder geschlossen wird?

Hier ist mein Click-Event oder vielleicht gibt es einen besseren Weg, als ein Click-Event zu verwenden?

$(document).on("click", "a.register-student-link", function() {
    // do some stuff to check if opening or closing
}

<div>
  <a [email protected] class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample">
                                                    Register Student
                                                </a>
</div>

Bootstrap verwendet das aria-expanded-Attribut, um wahr oder falsch anzuzeigen, ob die Region reduziert ist oder nicht.

var isExpanded = $(collapsableRegion).attr("aria-expanded");

  • Für alle, die damit zu kämpfen haben, dies zum Laufen zu bringen; Stellen Sie sicher, dass Sie die initialisieren aria-expanded zuschreiben true oder false im HTML!

    – slugmandrew

    10. April 2019 um 15:47 Uhr

  • Dies könnte wahr sein und Ihnen wahrscheinlich geholfen haben, da diese Antwort vom OP stammt. Wenn ich jedoch die Frage selbst durchlese (die ich auch hatte), beantwortet dies sie überhaupt nicht. Die folgende Antwort (mit gezeigt.bs.collapse) funktioniert wie ein Zauber und beantwortet die wahre Frage, “wie man das Kollapsereignis bestimmt”. Ich denke, das sollte als die richtige Antwort markiert werden.

    – Kalko

    4. Juni 2019 um 14:30 Uhr


Benutzer-Avatar
Josia Krutz

Versuchen:

$('#collapseDiv').on('shown.bs.collapse', function () {
   console.log("Opened")
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   console.log("Closed")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <a [email protected] class="register-student-link" data-toggle="collapse" href="#collapseDiv" aria-expanded="false" aria-controls="collapseExample">Register Student</a>
</div>

<div class="collapse" id="collapseDiv">This is the collapsible content!</div>

(basierend auf https://stackoverflow.com/a/18147817/2033574 (Kevin erwähnt) und http://www.bootply.com/73101)

Ich brauchte einen Weg, um festzustellen, ob das Element zusammengebrochen war, BEVOR es tatsächlich zusammenbrach. Wohingegen die Ereignis-Listener erst danach auslösen.

//Will return true if uncollapsed
$('#collapseDiv').hasClass('in');

//Will return true if in the process of collapsing
$('#collapseDiv').hasClass('collapsing');

//Will return true if collapsed
$('#collapseDiv').hasClass('collapse');

Benutzer-Avatar
Kevin Friedheim

Sie können die Veranstaltung verfolgen hidden.bs.collapse

siehe Geige: http://jsfiddle.net/kyeuvx1d/

Benutzer-Avatar
sam007

if(!$("#id").hasClass('show')){
    alert("Uncollapsed");
}
else {
    alert("Collapsed");
}

für Bootstrap4

1228900cookie-checkWie kann festgestellt werden, ob ein Bootstrap-Kollaps öffnet oder schließt?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy