La función toggleClass de jQuery no cambia las clases de CSS cuando se hace clic en navbar-toggle.

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">Iniciar sesión</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;">Registrarse</button>
        </div>
    </div>
</div>

Ahora quiero cambiar de la clase user-actions-show a la clase user-actions-off, que se utiliza para los botones, cuando se hace clic en navbar-toggle usando toggleClass de jQuery:

<script>
    $(".navbar-toggle").click(function(){
        $(".user-actions-show").toggleClass("user-actions-off");
    })
</script>

Y así es cómo se ve la clase .user-actions-off:

.user-actions-off{
     display:none;
}

Pero ahora el problema es que no funciona correctamente.

Entonces, ¿qué estoy haciendo mal aquí? ¿Cómo puedo ocultar correctamente esos botones cuando se hace clic en navbar-toggle?

Esta es la clase 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>