html - 如何在点击时隐藏垂直导航并显示相应的内容（移动网站上的导航带有后退按钮）

Question

我有一个移动网站，它是作为单页应用程序构建的。我正在使用 Angular 创建一个垂直菜单，我想在单击的菜单项上隐藏菜单，并使用后退按钮显示其内容容器以返回菜单。

首先，我有主组件，菜单和内容容器彼此相邻

主要组件.html

 <div class="container">


  <div class="col-md-3 col-12 menu-container">
    <app-menu-container></app-menu-container>

  </div>
<div class="col-md-9 col-12"> 
  <app-content-container></app-content-container>
</div>
</div>

menu.component.html 循环菜单项并显示它们

<div *ngFor="let menuItem of menu">
           <app-menu-item [menuItem]="menuItem"> </app-menu-item>       
       </div> 

显示每个 menuItem 的 menuItem.component。单击项目时，主题将触发以打开相应的内容容器组件

在 content-container 组件中，我订阅了获取项目以打开内容容器 content-container.component.ts

  subscribeToOpenContainer() {
    this.subscriptionToOpenContainer = this.menuService.openMenuItemContainer.subscribe((menuItem) => {
      this.menuItem = menuItem;
    }
    );
  }

内容容器.html

<ul>
      <li>
        <a class="document-type-icon"><i></i></a>


      <div class="text-container">
        <p class="document-name"></p>
        <p class="last-update-date"> Last update date:</p>

        <div class="line"></div>
      </div>

      <div class="action-icons-container">

        <a class="delete-and-edit-icon"><i class="fa fa-trash"></i></a>

        <a> <i class="fa fa-edit delete-and-edit-icon> </i>
        </a>

      </div>
    </li>
<ul/>

我希望当菜单项处于活动状态并且内容容器显示为带有返回按钮以返回菜单时隐藏作为单个组件的菜单。

目前的方法

我想在手机屏幕尺寸上实现什么

标签： htmlcssangular

Answer 1

如果您想通过单击按钮隐藏侧边栏，这可以使用简单的ngIf来实现。如果要在单击任意位置时隐藏侧边栏，可以使用HostListener。

@HostListener('click', ['$event'])onClick(event) { });

您可以使用event.target.id获取单击的元素的 id 。使用if逻辑检查单击了哪个项目，如果尚未打开，则打开侧边栏，如果已打开，您可以通过简单地将 css 添加或删除到DOM来隐藏它。