Question

我正在尝试将一些CSS应用于离子侧菜单的背景。我的CSS非常简单：

＆＃13;

.my-menu-item {
  background-color: blue !important;
  color: white !important
}

＆＃13;

我已将此样式应用于离子内容，离子列表，离子项和离子侧菜单。从来没有任何菜单项获得蓝色背景。

有办法做到这一点吗？如果是这样的话？

这是我的HTML代码：

＆＃13;

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="header-text"> <!-- removed bar-stable -->
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear" menu-toggle="left">
          <i class="icon header-bar-icon ion-navicon"></i>
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear"  ng-click="shareAnywhere()">
          <i class="icon header-bar-icon ion-ios-upload-outline"></i>
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu class="my-menu-item" side="left">
    <ion-header-bar class="bar-stable">
      <h1 id="menu-heading">MENU</h1>
    </ion-header-bar>
    <ion-content class="my-menu-item">
      <ion-list class="my-menu-item">
        <ion-item  class="my-menu-item" menu-close href="#/app/discover">
          <span class="menu-style">DISCOVER MOVIES</span>
        </ion-item>
        <ion-item  class="my-menu-item" menu-close href="#/app/watchlist">
          WATCH LIST
        </ion-item>
        <ion-item  class="my-menu-item" menu-close href="#/app/home">
          TUTORIAL
        </ion-item>
        <ion-item  class="my-menu-item" menu-close href="#/app/friends">
          FRIENDS
        </ion-item>
        <!--
        <ion-item  class="item-icon-right" nav-clear menu-close href="#/app/test">
		      TEST
		    </ion-item>
        -->
        <ion-item  class="my-menu-item" menu-close href="#/app/news">
          NEWS
        </ion-item>
        <ion-item  class="my-menu-item" menu-close href="#/app/settings">
          SETTINGS
        </ion-item>
        <ion-item  class="my-menu-item" menu-close ng-click="logoutUser()">
          SIGN OUT
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

＆＃13;

Answer 1

您不需要在离子项元素中使用一些＆＃34; span＆＃34; s。但是你需要将你的风格应用到离子项＆gt;元素。

这是我的一个项目中的一些代码：

<ion-content>
    <ion-list>
        <ion-item ui-sref=".c1" ui-sref-active="active">1. Y</ion-item>
        <ion-item ui-sref=".c2" ui-sref-active="active">2. O</ion-item>
        <ion-item ui-sref=".c3" ui-sref-active="active">3. D</ion-item>
        <ion-item ui-sref=".c4" ui-sref-active="active">4. N</ion-item>
    </ion-list>
</ion-content>

而SASS（在这里我将覆盖＆＃34;活动＆＃34;离子项目的孩子（一个元素）的背景颜色）

    ion-list {
        ion-item {
            &.active a {
                background-color: $darkYellow !important;
                color: #fff;
            }
        }
    }

或者在CSS中：（假设您将colorList类添加到离子列表中）

ion-list.coloredList ion-item.active  a {
    background-color: red !important; 
}

使用修改后的HTML，以便不为所有离子列表着色。

<ion-list class="coloredList"> ... </ion-list>

无法改变离子侧菜单的背景

1 个答案: