Question

所以在我做的这个小小提琴中，我试图在点击.menuToggle时将max-height更改为20em，我是通过切换类来实现的。该类被切换，但在chrome开发人员工具中，样式被划掉了。我假设这与媒体查询有关但不完全确定。

非常感谢任何帮助，谢谢:)。 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;
  }
}

Answer 1

这只是一个特异性问题。类和元素/伪元素的特性高于一类。

所以你只需要使.solving选择器更具体。 E.g。

ul.solving
.navbar .solving
！重要

如果您不知道可以在https://specificity.keegan.st/

上查看的特异性

Answer 2

尝试将!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;
  }

}

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

Answer 3

只需将$link替换为.showing，请参阅下面的

.navBar>ul.showing

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您使用了错误的媒体查询，请查看此

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

由于媒体查询，CSS风格被划掉了？

4 个答案: