由於媒體查詢而被刪除的CSS樣式？

所以在這個小小的提琴我做了，我試圖改變最大高度被點擊.menuToggle時20em，我通過切換一類這樣做。該類被切換，但在Chrome開發人員工具中，樣式被刪除。我假設這與媒體查詢有關，但不完全確定。由於媒體查詢而被刪除的CSS樣式？

任何幫助將不勝感激，謝謝:)。 https://jsfiddle.net/kakbxak0/

@media screen and max-width 1024px{ 
    .navBar ul li { 
    box-sizing:border-box; 
    width:100%; 
    text-align:center; 
    padding:15px; 
    } 

    .navBar>ul { 
    max-height:0; 
    } 

    .showing { 
    max-height:20em; 
    } 

    header { 
    text-align:center; 
    } 

    .menuToggle { 
    display:block; 
    } 
}

來源

2017-03-01 Kempster

儘量把!important在.showing類20em後。我相信問題在於你正在給一個優先於類的標籤添加樣式。我可能是錯誤的邏輯，但添加!important已經過測試和工作。

$(document).ready(function(){ 
 

 
$(".menuToggle").click(function(){ 
 
    $(".navBar > ul").toggleClass("showing"); 
 
}); 
 

 
});

header{ 
 
    box-sizing: border-box; 
 
    background-color: #5e99f5; 
 
    width: 100%; 
 
    padding: 12.5px; 
 
    color: white; 
 
    text-align: right; 
 
    font-size: 4vmin; 
 
    font-weight: bold; 
 
} 
 

 
.navBar>ul{ 
 
    background-color: #3d6db7; 
 
    overflow: hidden; 
 
    color: white; 
 
    padding: 0; 
 
    text-align: left; 
 
    margin: 0; 
 
} 
 

 
.navBar li{ 
 
    display: inline-block; 
 
    padding: 15px; 
 
} 
 

 
.navBar a, .menuToggle{ 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 14pt; 
 
} 
 

 
.menuToggle{ 
 
    width: 100%; 
 
    background: #3861a0; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 16px 10px; 
 
    cursor: pointer; 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 1024px){ 
 
    .navBar ul li{ 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    padding: 15px; 
 
    text-align: center; 
 
    } 
 

 
    .showing{ 
 
    max-height: 20em!important; 
 
    } 
 
    .navBar>ul{ 
 
    max-height: 0em; 
 
    } 
 

 

 
    header{ 
 
    text-align: center; 
 
    } 
 

 
    .menuToggle{ 
 
    display: block; 
 
    } 
 

 
}

\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
 
\t </script> 
 
<body> 
 
\t <header> 
 
\t \t Title 
 
\t </header> 
 
\t <nav class="navBar"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="index.html">Home</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="about.html">About</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="services.html">Services</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="gallery.html">Gallery</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="contact.html">Contact</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <div class="menuToggle">Menu</div> 
 
\t </nav> 
 
</body>

來源

2017-03-01 05:41:14

只需更換.showing與.navBar>ul.showing見下文

.navBar ul.showing{ 
    max-height: 20em; 
}

$(document).ready(function(){ 
 

 
$(".menuToggle").click(function(){ 
 
    $(".navBar > ul").toggleClass("showing"); 
 
}); 
 

 
});

header{ 
 
    box-sizing: border-box; 
 
    background-color: #5e99f5; 
 
    width: 100%; 
 
    padding: 12.5px; 
 
    color: white; 
 
    text-align: right; 
 
    font-size: 4vmin; 
 
    font-weight: bold; 
 
} 
 

 
.navBar>ul{ 
 
    background-color: #3d6db7; 
 
    overflow: hidden; 
 
    color: white; 
 
    padding: 0; 
 
    text-align: left; 
 
    margin: 0; 
 
} 
 

 
.navBar li{ 
 
    display: inline-block; 
 
    padding: 15px; 
 
} 
 

 
.navBar a, .menuToggle{ 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 14pt; 
 
} 
 

 
.menuToggle{ 
 
    width: 100%; 
 
    background: #3861a0; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 16px 10px; 
 
    cursor: pointer; 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 1024px){ 
 
    .navBar ul li{ 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    padding: 15px; 
 
    text-align: center; 
 
    } 
 

 
    .navBar>ul{ 
 
    max-height: 0em; 
 
    } 
 

 
    .navBar>ul.showing{ 
 
    max-height: 20em; 
 
    } 
 

 
    header{ 
 
    text-align: center; 
 
    } 
 

 
    .menuToggle{ 
 
    display: block; 
 
    } 
 

 
}

\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
 
\t </script> 
 
<body> 
 
\t <header> 
 
\t \t Title 
 
\t </header> 
 
\t <nav class="navBar"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="index.html">Home</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="about.html">About</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="services.html">Services</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="gallery.html">Gallery</a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="contact.html">Contact</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <div class="menuToggle">Menu</div> 
 
\t </nav> 
 
</body>

來源

2017-03-01 05:42:06

您已經使用錯誤的介質查詢，請看這

@media screen and (max-width:1024px) { 
      .navBar ul li { 
      box-sizing:border-box; 
      width:100%; 
      text-align:center; 
      padding:15px; 
      } 

      .navBar>ul { 
      max-height:0; 
      } 

      .showing { 
      max-height:20em; 
      } 

      header { 
      text-align:center; 
      } 

      .menuToggle { 
      display:block; 
      } 
     }

來源

2017-03-01 06:00:44

這只是一個具體問題。一個類的特定性和一個元素/僞元素高於一個類。

所以，你只需要做出張繼軍田寶國李蕭選擇更具體。例如。

ul.solving
.navbar張繼軍田寶國李蕭
！重要

如果你不知道的特異性您可以檢查https://specificity.keegan.st/

來源

2017-03-01 09:36:15

由於媒體查詢而被刪除的CSS樣式？

回答

相關問題