實現點擊後改變字體大小落實

Question

我在Rails項目中使用Materializecss，並在導航欄中看到一個奇怪的錯誤。乍看之下，我的自定義CSS正在適合下拉字體大小和顏色。但是，當我點擊下拉鍊接後，原始的Materialize默認字體大小和顏色會閃爍。這是我用來模擬問題的JSFiddle：https://jsfiddle.net/sayyl/x11xv5k9/。請注意，在此小提琴中，字體保持深灰色，在我自己的項目中，文本會閃爍默認的實體大小綠色。兩者的字體大小錯誤都是相同的。

_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。 當你點擊下拉開啓/關閉時，這個類會發生變化，這可以解釋爲什麼在打開下拉菜單但關閉它時沒有閃爍。 嘗試下載沒有這個類的下拉內容，你應該沒問題。