Estoy usando Bootstrap 3 y tengo un div como este:
<div class="col-xs-12 col-sm-1 col-md-1 col-lg-2 login-form" style="margin-top:35px !important"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button type="button" class="btn btn-info btn-lg btn-block user-actions user-actions-show">Login</button> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <button type="button" class="btn btn-secondary btn-lg btn-block user-actions user-actions-show" style="margin-top:5px;">Register</button> </div> </div> </div>
Ahora quiero cambiar de la clase user-actions-show
a la clase user-actions-off
que se usa para los botones, cuando se hace clic en la barra de navegación usando jQuery navbar-toggle
:
<script> $(".navbar-toggle").click(function(){ $("user-actions-show").toggleClass("user-actions-off"); }) </script>
Y así es como se ve la clase .user-actions-off
:
.user-actions-off{ display:none; }
Pero ahora el problema es que no funciona.
Entonces, ¿qué estoy haciendo mal aquí? ¿Cómo puedo ocultar correctamente esos botones cuando se hace clic en la navbar-toggle
?
Esta es la navbar-toggle
:
<button class="navbar-toggler navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
Te falta el .
en tu guión.
Cambiar $("user-actions-show").toggleClass("user-actions-off");
a $(".user-actions-show").toggleClass("user-actions-off");
Eso debería solucionarlo.
Cree una clase cuyo nombre sea .hide
y cambie a su $(".user-actions-show")
; anulará su propiedad CSS existente a la propiedad CSS más reciente.