html - 如果我在 Angular 中點擊該類別則隱藏 div

我正在為我的 Angular 練習（版本 13）製作一個漢堡選單。

當我點擊漢堡圖標時，它會隱藏並打開菜單（切換），但我也希望在點擊其中一個元素（首頁、關於我、我的作品）後隱藏菜單。

我計劃的解決方案是，如果我點擊其中一個 nav__item 類別，就隱藏 nav 類別。

我的標題元件：

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>

.Ts 代碼，用於切換選單：

  isShown: boolean = false ; // hidden by default


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

菜單：

答案＃1

將 toggleShow() 函數添加到每個 li 元素不起作用嗎？

<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>

答案＃2

CSS3：建立一個隱藏屬性和一個顯示屬性，如下

.hidden{
display:none;
}

.show{

display:block; //or inline etc
}


JavaScript:

    

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

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

這將有效地在隱藏和顯示你想要的任何元素之間切換，次數隨你想要的次數。請注意，這只是偽代碼來說明邏輯。希望這對你有幫助.....和平，掰掰 👍