html - Ẩn div nếu tôi nhấp vào class trong Angular

Tôi đang tạo một menu Hamburger cho bài thực hành Angular của mình (phiên bản 13).

Khi tôi nhấp vào biểu tượng hamburger, nó ẩn đi và mở menu (chuyển đổi), nhưng tôi cũng muốn ẩn menu sau khi tôi nhấp vào một trong các mục (Trang chủ, Giới thiệu về tôi, Công việc của tôi).

Giải pháp mà tôi dự định là ẩn lớp nav nếu tôi nhấp vào một trong các lớp nav__item.

Thành Phần Tiêu Đề Của Tôi:

Html:

<header>
  <div class="logo">
      <img src="assets/img/norberticon.png" alt="">
  </div>
  <button class="nav-toggle" aria-label="toggle navigation" (click)="toggleShow()">
      <span class="hamburger"></span>
  </button>

  <nav class="nav" *ngIf="isShown">
      <ul class="nav__list" >
          <li class="nav__item"><a routerLink="/" class="nav__link">Home</a></li>
          <li class="nav__item"><a routerLink="about" class="nav__link">About me</a></li>
          <li class="nav__item"><a routerLink="/mywork" class="nav__link">My Work</a></li>
      </ul>
  </nav>

</header>

Mã .Ts để chuyển đổi Menu:

  isShown: boolean = false ; // hidden by default


  toggleShow() {
  
  this.isShown = ! this.isShown;
  
  }

Thực đơn:

Câu trả lời #1

Thêm hàm toggleShow() vào mỗi phần tử li không hoạt động?

<li class="nav__item"><a routerLink="/" class="nav__link" (click) = "toggleShow()">Home</a></li>
<li class="nav__item"><a routerLink="about" class="nav__link" (click) = "toggleShow()">About me</a></li>
<li class="nav__item"><a routerLink="/mywork" class="nav__link" (click) = "toggleShow()">My Work</a></li>

Câu trả lời #2

CSS3: Tạo một thuộc tính ẩn và một thuộc tính hiển thị như -

.hidden{
display:none;
}

.show{

display:block; //or inline etc
}


JavaScript:

    

const elementToBeHidden = document.
querySelector('.classselector');

const ToggleShow =()=>{
elementToBeHidden.classList.toggle('hidden');
}

Điều này sẽ chuyển đổi hiệu quả giữa việc ẩn và hiển thị bất kỳ phần tử nào bạn muốn bao nhiêu lần tùy thích. Lưu ý rằng đây chỉ là mã giả để làm rõ logic. Hy vọng điều này sẽ giúp bạn.....BÌNH AN OuT 👍