Bootstrap-mobile-menu-icon ändern auf x schließen
Ich möchte, wenn in der mobilen Ansicht das Menü-Symbol (definiert durch die Klasse Symbol-bar in der bootstrap basic navbar Beispiel) zu ändern, um eine X-Form (was ähnliches wie hier passiert: https://www.mint.com aber weniger Phantasie (ich will einfach nur ersetzen Sie die 3-Streifen mit einem X).
Im moment bin ich mit einer custom id: #ChangeToggle
<button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Zusammen mit dem folgenden javascript-Funktion (ich weiß, es ist einfach, aber ich bin neu hier):
<script>
$('#ChangeToggle').click(function () {
if($('#ChangeToggle span').hasClass('ToggleButton')) {
$('#ChangeToggle').html('<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>');
}
else {
$('#ChangeToggle').html('<span class="ToggleButton glyphicon glyphicon-remove"></span>');
}
});
</script>
Alles funktioniert, das einzige Problem ist, dass wenn ich auf, genau auf das X-Symbol, das Menü nicht schließen. Es schließt erst, wenn ich auf die außerhalb (anywhere else in der Taste). Das einzige, was es tut, während ein Klick auf das X-Symbol geht zurück auf die original 3 Streifen.
Jemand weiß, was ich falsch mache?
InformationsquelleAutor DoubleD | 2015-01-31
Du musst angemeldet sein, um einen Kommentar abzugeben.
Brauchen Sie nicht Javascript, CSS wird die Arbeit
InformationsquelleAutor Helmut
Intelligente Entscheidung hat mir geholfen, in codepen
HTML
CSS
JS
InformationsquelleAutor dimitar
Den code unten hilft Ihnen, dieses Problem zu lösen.
Html:
css:
javascript
Dieser Schnipsel zum ändern der mobile-Symbol zu Symbol schließen klicken Sie auf die Schaltfläche. Demo
InformationsquelleAutor M. Lak