0
このドロップダウンメニューを作成したので、「人気の高い」タイトルにカーソルを合わせるまではうまくいきます。このイベントが発生すると、セクションの高さは370pxのときに0pxのままです。私は真剣に理由を理解していない。誰か助けてくれますか？ここでドロップダウンメニューが正しく動作しない
<!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