所以我创建了这个下拉菜单，在我将鼠标悬停在“最受欢迎”标题上之前，它一直很好用。发生此事件时，该部分的高度应为 370 像素，但仍为 0 像素。我真的不明白为什么。有人可以帮助我吗？
<!DOCTYPE html>
<html>
<head>
<title>list</title>
<!--links in font-->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>
<!--links in jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<style type="text/css">
/* do not include in production */
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: whitesmoke;
font-family: 'Yanone Kaffeesatz', sans-serif;
color: white;
}
.cards {
background: white;
padding: 10px;
margin: 5px auto;
border: #DDD solid 1px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
/* INCLUDE */
#n-wrap {
max-width: 950px;
height: 590px;
overflow: hidden;
margin: 0 auto 10px;
}
.n-titles {
line-height: 50px;
width: 100%;
height: 50px;
text-align: center;
transition: background-color 0.5s ease;
color: black;
}
.n-titles:first-child {
background-color: #888;
color: white;
}
.n-titles:nth-child(n+2):hover {
background-color: rgb(96, 223, 229);
color: white;
cursor: pointer;
}
.n-titles:nth-child(n+2):hover + .n-items {
height: 370px;
}
.n-items {
height: 0px;
width: 100%;
transition: height 0.5s ease;
background-color: white;
overflow: hidden;
text-align: center;
}
.n-items img {
width: 25%;
padding-top: 15px;
}
.n-items img:nth-child(2) {
padding: 0px 40px 0px 40px;
}
.n-items:hover {
height: 370px;
}
#highlight {
background-color: rgb(96, 223, 229);
color: white;
}
</style>
<body>
<div id="n-wrap" class="cards">
<div class="n-titles">FEATURED</div>
<div class="n-titles">Most Popular</div>
<div class="n-items">
<img src="pseudo_img.jpg">
<img src="pseudo_img.jpg">
<img src="pseudo_img.jpg">
</div>
<div class="n-titles">On Sale</div>
<div class="n-items">
<img src="pseudo_img.jpg">
<img src="pseudo_img.jpg">
<img src="pseudo_img.jpg">
</div>
<div class="n-titles">Newest</div>
<div class="n-items">
<img src="pseudo_img.jpg">
<img src="pseudo_img.jpg">
<img src="pseudo_img.jpg">
</div>
</div>
<div style="height: 100vh"></div>
</body>
<script type="text/javascript">
$(document).ready(function() {
//always have first section open
$(".n-items:nth-child(3)").css("height", "370");
//highlight specific title
$(".n-items, .n-titles").hover(function() {
$(".n-items:nth-child(3)").css("height", "0");
$(".n-titles").removeAttr("id");
switch ($(this).index()) {
case 2:
$(".n-items:nth-child(3)").css("height", "370");
$(".n-titles:nth-child(2)").attr("id", "highlight");
break;
case 4:
$(".n-items:nth-child(3)").css("height", "0");
$(".n-titles:nth-child(4)").attr("id", "highlight");
break;
case 6:
$(".n-items:nth-child(3)").css("height", "0");
$(".n-titles:nth-child(6)").attr("id", "highlight");
break;
}
}, function() {
for (var i = 2; i <= 6; i +=2) {
$(".n-titles:nth-child(" + i + ")").removeAttr("id");
}
$(".n-items:nth-child(3)").css("height", "370");
});
});
</script>
</html>
这是一个jsfiddle
最佳答案
因此，在您的 JavaScript 中，您将内嵌高度值添加到您的标记中(0px 或 370px。默认情况下，这些内嵌样式将覆盖样式表中的任何内容。这就是 CSS 特异性的工作原理:
...inline style rules always have the highest specificity, the only way to overwrite them within the CSS cascade is to use the !important statement on the relevant declarations—an approach that creates a maintenance nightmare. (via Sitepoint)
Sitepoint 还为您提供了这个问题的解决方案(好吧，即使不是最好的，也是最快的解决方案)；在悬停声明中添加一个 !important 标志:
.n-titles:nth-child(n+2):hover + .n-items {
/* Important needed here to override inline CSS generated by JS */
height: 370px!important;
}
虽然上面的代码解决了您最初的问题，但您可能想探索是否可以通过使用 JS 来应用标识 Accordion 状态的类(如 是-open is-closed)，然后允许您从样式表中控制所有 CSS。
关于jquery - 下拉菜单无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36163395/