单击外部 '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

如果你想让菜单保持打开状态，我认为你或许应该探索 split-pane：

ion-split-pane - Ionic Documentation

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

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

Split Pane in Ionic ← Alligator.io

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

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

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

单击外部 'div' 元素时隐藏菜单

Menu hiding when outside 'div' element is clicked

ionic-framework

ionic4