单击标题时停止自动隐藏的侧菜单答案

【问题标题】：Side menu to stop auto hide on click of heading单击标题时停止自动隐藏的侧菜单
【发布时间】：2020-07-16 13:46:53
【问题描述】：

我已经安排好了我的菜单，它有headings 和sub headings。当我点击我的headings 时，它会展开以显示subheadings，但它会在点击标题时自动隐藏。

它不应该在点击headings时隐藏。

下面是我的app.component.html。

    <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle *ngFor="let item of apppages_heading; let i = index" (click)="item.subhead.length > 0 ? item.expandable = !item.expandable : ''">
            <div style="width:100%">
              <div style="width:100%" (click)="item.heading == 'Dashboard' ? this.router.navigateByUrl('/dashboard') : ''">{{item.heading}}</div>
              <ion-item *ngIf="item.expandable">
                <div *ngFor="let p of item.subhead; let i = index" style="width:100%;float:left;"  (click)="callpg(i);" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </div><br/>
            </ion-item>
          </div>
          </ion-menu-toggle>
        </ion-list>

       <!-- <ion-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

           <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list> -->

      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>

app.component.ts代码：

 public apppages_heading = [
    {
      heading: 'Dashboard',
      url: '/dashboard',
      icon: 'paper-plane',
      subhead:[]
    },
    {
      heading: 'Heading1',
      subhead: [{
        title: 'Manage users',
        url: '/crud',
        icon: 'mail'
      },
      {
        title: 'Assign Work',
        url: '/crud2',
        icon: 'mail'
      }]
    },
    {
      heading: 'Heading2',
      subhead: [{
        title: 'Search work',
        url: '/search-todos',
        icon: 'mail'
      },
      {
        title: 'Show works',
        url: '/showworks',
        icon: 'mail'
      }]
    },
    {
      heading: 'Heading3',
      subhead: [ {
        title: 'File uploader',
        url: '/fileuploader',
        icon: 'mail'
      },
      {
        title: 'works pagination',
        url: '/workspagination',
        icon: 'mail'
      }]
    },
    {
      heading: 'Heading4',
      subhead: [ {
        title: 'Swiper',
        url: '/swiper',
        icon: 'mail'
      },
      {
        title: 'Daily report',
        url: '/dailyreport',
        icon: 'mail'
      },
      {
        title: 'View Daily Report',
        url: '/viewdailyreport',
        icon: 'mail'
      }]
    }, 
    {
      heading: 'Heading5',
      subhead: [{
        title: 'Add New Lead',
        url: '/newlead',
        icon: 'mail'
      },
      {
        title: 'View Leads',
        url: '/viewleads',
        icon: 'mail'
      }]
    }
  ];

菜单截图：

编辑

删除<ion-menu-toggle> 已在单击heading 时停止关闭，但当我单击sub-heading 时它也已停止关闭。

点击sub heading，它应该会关闭。

<div style="width:100%" *ngFor="let item of apppages_heading; let i = index" (click)="item.subhead.length > 0 ? item.expandable = !item.expandable : ''">
      <div style="width:100%" (click)="item.heading == 'Dashboard' ? this.router.navigateByUrl('/dashboard') : ''">{{item.heading}}</div>
      <ion-item *ngIf="item.expandable">
        <div *ngFor="let p of item.subhead; let i = index" style="width:100%;float:left;"  (click)="callpg(i);" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
      <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
      <ion-label>{{ p.title }}</ion-label>
    </div><br/>
    </ion-item>
  </div>

【问题讨论】：

尝试从<ion-menu-toggle>中删除您的ngFor
我从那里删除了它并在<ion-menu-toggle> 中添加了auto-hide="false"，仍然没有工作
我在用你的例子玩 sidemenu。我找到了解决方案。删除<ion-menu-toggle> 标签。并在ion-item 上运行ngFor。它会阻止菜单关闭。
我已经更新了问题，见Edit:: 1
为此你必须使用 MenuController。

标签： javascript angular ionic-framework ionic2 ionic4

【解决方案1】：

根据我们，这里的讨论是工作示例：

app.component.html

<div *ngFor="let item of apppages_heading; let i = index" (click)="item.subhead.length > 0 ? item.expandable = !item.expandable : ''">
        <div style="width:100%">
          <div style="width:100%" (click)="item.heading == 'Dashboard' ? this.router.navigateByUrl('/dashboard') : ''">{{item.heading}}</div>
          <ion-item *ngIf="item.expandable" (click)="toggleMenu()"> <!-- added toggle function on expanded list -->
            <div *ngFor="let p of item.subhead; let i = index" style="width:100%;float:left;"  (click)="callpg(i);" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
          <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
          <ion-label>{{ p.title }}</ion-label>
        </div><br/>
        </ion-item>
      </div>
    </div>

app.component.ts

import { MenuController } from '@ionic/angular';

constructor(
    private menu: MenuController
  ) { }

toggleMenu(){ // this function will toggle your menu. 
    this.menu.toggle();
  }

【讨论】：