Question

我的旁边菜单运行正常。但是，突然它不再起作用了。我不确定是什么问题。这是我的html，CSS和inspect元素代码。

我的.html文件看起来像这样

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>      
      <img src="assets/images/home/KmartText.png">
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="takeToCart();">
          <ion-icon name="cart"></ion-icon>
          <div class="qntyColor">{{cartCount}}</div>
      </button>    
    </ion-buttons>
  </ion-navbar>

</ion-header>

.css文件看起来像这样

 //image size
    ion-title img{
        height: 35px;
        width: 35%;
    }

    //image center
    ion-title{
        text-align: center;
    }

    //ion-navbar backgroundcolor for android and ios
    .toolbar-background-md{
        background: $background-header;
    }
    .toolbar-background-ios{
        background: $background-header;
    }

    //applying color for icons in header
    ion-navbar button ion-icon{
        color: white;
    }

当我在sidemenu按钮上给出inspect元素时，我收到了这段代码：

<button icon-only="" ion-button="" menutoggle="" class="bar-buttons bar-buttons-md disable-hover bar-button bar-button-md bar-button-menutoggle bar-button-menutoggle-md bar-button-default bar-button-default-md" tappable=""><span class="button-inner">
      <ion-icon name="menu" role="img" class="icon icon-md ion-md-menu" aria-label="menu" ng-reflect-name="menu"></ion-icon>
    </span><div class="button-effect" style="transform: translate3d(-4px, -19px, 0px) scale(1); height: 71px; width: 71px; opacity: 0; transition: transform 273ms, opacity 191ms 82ms;"></div></button>

更新我创建了一个新项目并仅实现了侧面菜单。我检查了菜单元素，得到了这个：

<button icon-only="" ion-button="" menutoggle="" class="disable-hover bar-buttons bar-buttons-md bar-button bar-button-md bar-button-default bar-button-default-md bar-button-menutoggle bar-button-menutoggle-md"><span class="button-inner">
        <ion-icon name="menu" role="img" class="icon icon-md ion-md-menu" aria-label="menu" ng-reflect-name="menu"></ion-icon> 
    </span><div class="button-effect" style="transform: translate3d(-28px, -24px, 0px) scale(1); height: 76px; width: 76px; opacity: 0; transition: transform 273ms, opacity 191ms 82ms;"></div></button>

两个检查元素代码都有一些差异。

侧面菜单不适用于离子服务

0 个答案: