点击后实现下拉更改字体大小

Question

我在 Rails 项目中使用 Materializecss，但我的导航栏中出现了一个奇怪的错误。乍一看，我的自定义 css 正在正确渲染下拉字体大小和颜色。然而，当我点击一个下拉链接后，原来的 Materialize 默认字体大小和颜色会闪烁。这是我用来模拟问题的 JSFiddle：https://jsfiddle.net/sayyl/x11xv5k9/。请注意，虽然在这个 Fiddle 中字体保持深灰色，但在我自己的项目中，文本会闪烁默认的 Materialize 绿色。两者的字体大小错误相同。

_nav.html.erb

<nav>
<!-- Profile Dropdown Structure -->
<ul id="settingDrop" class="dropdown-content">
  <li><%= current_user.full_name %></li>
  <li class="divider"></li>
  <li><%= link_to "Edit Profile", edit_user_path(current_user) %></li>
  <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
</ul>

<!-- Alert Dropdown Structure -->
<ul id="alertDrop" class="dropdown-content">
  <li class="alert">          
    <% if !current_user.confirmed_at %>
      Confirm your email
    <% end %>
  </li>
</ul>


  <div class="nav-wrapper">
    <a href="/" class="brand-logo">LOGO</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

    <ul class="right hide-on-med-and-down">
        <li class="alert">
          <a class="dropdown-button valign-wrapper alert" href="#!" data-activates="alertDrop" data-beloworigin="true"><i class="fa fa-bell fa-lg" aria-hidden="true"></i></a>
        </li>
        <li><a class="dropdown-button valign-wrapper" href="#!" data-activates="settingDrop" data-beloworigin="true"><%= image_tag @user.avatar.url(:thumb), class: "circle responsive-img" %> <i class="material-icons">arrow_drop_down</i></a></li>
    </ul>

    <ul class="side-nav" id="mobile-demo">
        <li><%= current_user.email %></li>
        <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
        <% if !current_user.confirmed_at %>
          <li class="alert" style="color:#e74c3c"><i class="fa fa-bell" aria-hidden="true"></i> confirm your email</li>
        <% end %>
    </ul>
  </div>
</nav>

nav.scss

nav {

.nav-wrapper {
  background-color: #e7e6e4;
  color: #505050;
  font-family: 'Raleway', sans-serif;

  .brand-logo {
    color: #000;

    .logo-highlight {
      color: #b8d6c6;
    }
  }

  a {
    color: #505050;
    padding: 0 15px 0 8px;
  }

  .alert {
    color:#e74c3c;
    padding: 0 15px 0 8px;
  }

  ul {
    height: inherit;

    img {
      height: 50px;
      border: 1px solid #fff;
    }
  }

  #settingDrop,
  #alertDrop {

    min-width: 150px !important;
    &.dropdown-content.active {

      li {
        color: #505050;
        font-size: 12px;
        line-height: 12px;
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 0 8px;

        &.divider {
          min-height: 0;
        }

        &.alert {
          color:#e74c3c;
        }

        i {
          height: inherit;
          line-height: inherit;
        }

        p {
          font-weight: 500;
          font-size: 14px;
        }

        > a {
          color: #505050;
          padding: 0;
          font-size: inherit;
          line-height: inherit;
        }


        a:hover {
          background-color: rgba(0,0,0,0);
        }
      }

      li:first-child {
        margin-top: 10px;
      }


    }
  }

}

}

Answer 1

这可能是因为您正在设置.active 类的样式。 当您单击下拉菜单打开器/关闭器时，此类会发生变化，这可以解释为什么打开下拉菜单但关闭它时没有闪烁。 尝试在没有此类的情况下设置下拉内容的样式，应该没问题。