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

Question

我正在创建一个简单的离子仪表板，它由顶部的工具栏和左侧的可折叠菜单(导航条)组成。菜单由工具栏中的菜单按钮切换，但是单击独立的'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

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

• 离子/离子-团队/离子

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

• 离子分裂板-离子文献

但即使如此，我认为您还需要在所有的“桌面”菜单中添加自己的切换按钮才能随意折叠。

本教程展示了如何使用以角表示的菜单设置它：

• 离子Alligator.io中的拆分窗格

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

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

这个教程是从尺寸变化的角度给你的，但是我认为你可以用你自己的菜单按钮把它连接成一个切换的bool？