单击“div”元素外部时隐藏菜单

Question

我正在用 ionic 创建一个简单的仪表板，它由顶部的工具栏和左侧的可折叠菜单（导航栏）组成。菜单由工具栏中的菜单按钮切换，但单击独立的“div”组件也会导致菜单隐藏。

<ion-content>
    <ion-menu type="push" menuId="nav-menu">
      // create menu items
    </ion-menu>
    <div main>
        hello world
    </div>
</ion-content>


I expect the menu to remain open/unchanged when clicking on the hello world.

Answer 1

这是正常行为，不可配置：

• ionic/menu.tsx at master · ionic-team/ionic

如果您想保持菜单打开，我认为您应该探索拆分窗格：

• ion-split-pane - Ionic Documentation

但即便如此，我认为您仍需要将自己的切换按钮添加到所有“桌面”菜单中，以便有选择地折叠。

本教程展示了如何在 Angular 中使用菜单进行设置：

• Split Pane in Ionic ← Alligator.io

我认为这部分是您需要添加自己的切换代码的​​地方：

<ion-split-pane [when]="checkSize()">
  <!-- ... -->
</ion-split-pane>

本教程是从大小变化的角度为您提供的，但我认为您可以将其连接到您自己的菜单按钮中的切换布尔值中？