0

Esta es parte de mi código, estoy usando Typescript y Angular, solo deseo que cuando haga clic fuera de la barra de navegación. se contraiga a su posición normal el botón, y se oculte lo demás, o sea la barra de navegación.

export class NavMenuComponent {
  constructor(private _accountService: AccountService, private _router: Router) { }

  isExpanded = false;
  text = 'Close Drawer';

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
    this.text = this.isExpanded ? 'Open Drawer' : 'Close Drawer';
  }

  logout() {
    this._accountService.logout();
    this._router.navigate(['/']);
  }

  estaLogeado() {
    return this._accountService.estaLogeado();
  }
}

este es parte del HTML estoy usando un botón que al momento en el que la ventana se hace más pequeña, se muestra ese botón que al hacer clic en el, se expande la barra de navegación, pero solo se contrae al hacer clic de nuevo en el mismo botón.

<header>
  <nav class='navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3'>
    <div class="container">
      <a class="navbar-brand" [routerLink]='["/"]'><span>MÓDULO</span> ALMACÉN</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Toggle navigation"
        [attr.aria-expanded]="isExpanded" (click)="toggle() *ngIf="(isHandset | async)!.matches">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" [ngClass]='{"show": isExpanded}'>
        <ul class="navbar-nav flex-grow">
          <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
            <a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>
          </li>
          <li class="nav-item" [routerLinkActive]='["link-active"]'>
            <a class="nav-link text-dark" [routerLink]='["/almacen"]'>Catálogo Almacén</a>
          </li>
          <li *ngIf="!estaLogeado()" class="nav-item" [routerLinkActive]='["link-active"]'>
            <a class="nav-link text-dark" [routerLink]='["/register-login"]' (click)='collapse()'>
              <span class="glyphicon glyphicon-th-list"></span> Register/login
            </a>
          </li>
          <li *ngIf="estaLogeado()" class="nav-item" [routerLinkActive]='["link-active"]'>
            <a class="nav-link text-dark" (click)='logout()'>
              <span class="glyphicon glyphicon-th-list"></span>Logout
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

1 respuesta 1

0

A modo de concepto:


    $(document).on("click",function(e) {

            var container = $("#idElemento");

                if (!container.is(e.target) && container.has(e.target).length === 0) { 
                //Se ha pulsado en cualquier lado fuera 
                }
       });

Ejemplo:

$(document).on("click",function(e) {            
     var container = $("#divMsg");

        if (!container.is(e.target) && container.has(e.target).length === 0) { 
           alert("Pulsaste fuera");               
        }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divMsg">Este sería tu barra de navegación</div>

Aplicando CSS para ocultar esa barra de navegación saldría

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.