CSS-Stil wird wegen Medienabfrage durchgestrichen?

Also in dieser kleinen Geige, die ich gemacht habe, versuche ich, die maximale Höhe zu 20em zu ändern, wenn .menuToggle angeklickt wird, mache ich dies, indem ich eine Klasse umschalte. Die Klasse wird umgeschaltet, aber in Chrome-Entwicklertools ist der Stil durchgestrichen. Ich gehe davon aus, dass dies etwas mit der Medienabfrage zu tun hat, aber nicht ganz sicher ist.CSS-Stil wird wegen Medienabfrage durchgestrichen?

Jede Hilfe würde sehr geschätzt werden, danke :). 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; 
    } 
}

Quelle

2017-03-01 Kempster

Try !important nach dem 20em in der .showing Klasse zu setzen. Ich glaube, das Problem besteht darin, dass Sie einem Tag Stil hinzufügen, der Vorrang vor einer Klasse hat. Ich könnte mit der Logik falsch sein, aber das Hinzufügen !important wurde getestet und funktioniert.

$(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>

Quelle

2017-03-01 05:41:14

Ersetzen Sie einfach .showing mit .navBar>ul.showing siehe unten

.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>

Quelle

2017-03-01 05:42:06

Sie haben falsche Medien Abfrage, Bitte beachten Sie

@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; 
      } 
     }

Quelle

2017-03-01 06:00:44

Es ist nur eine Besonderheit Problem. Die Spezifität einer Klasse und eines Elements/Pseudo-Elements ist höher als nur eine Klasse.

So müssen Sie nur die Selektor .solving spezifischer machen. Z.B.

ul.solving
.navbar .solving
! Important

Wenn Sie die Spezifität nicht wissen, können Sie sich auf https://specificity.keegan.st/ überprüfen

Quelle

2017-03-01 09:36:15

CSS-Stil wird wegen Medienabfrage durchgestrichen?

Antwort

Verwandte Themen