下拉菜单在Chrome设备模式正常但iOS真机无法使用

方案1：用Angular Renderer2替代原生DOM操作 #

原生classList操作在iOS Safari可能存在兼容性问题，改用Angular官方推荐的Renderer2来操作类：

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('menu') menu!: ElementRef;
  isMenuOpen = false;

  constructor(private renderer: Renderer2) {}

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
    if (this.isMenuOpen) {
      this.renderer.addClass(this.menu.nativeElement, 'showMenu');
    } else {
      this.renderer.removeClass(this.menu.nativeElement, 'showMenu');
    }
  }
}

对应的模板给菜单元素添加模板引用变量：

<div #menu class="menu">...</div>
<button (click)="toggleMenu()">汉堡按钮</button>

方案2：用Angular NgClass指令简化实现 #

直接通过NgClass绑定控制类，完全避免手动DOM操作：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  isMenuOpen = false;

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }
}

模板中绑定NgClass：

<div [ngClass]="{ 'showMenu': isMenuOpen }" class="menu">...</div>
<button (click)="toggleMenu()">汉堡按钮</button>

方案3：修复iOS Safari的交互兼容性问题 #

1. 给汉堡按钮添加样式确保点击事件触发：

.hamburger-btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 移除点击高亮，提升交互感知 */
}

2. 给菜单元素添加硬件加速属性，修复过渡/动画失效：

.menu {
  /* 保留原有样式 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

内容的提问来源于stack exchange，提问作者librogil