0
Bu açılır menüyü oluşturdum ve "En Popüler" başlığının üzerine gelene kadar harika çalışıyor. Bu olay meydana geldiğinde, bölümün yüksekliği, 370px olması gerektiğinde 0px'de kalır. Ben ciddi olarak nedenini anlamıyorum. Birisi bana yardım edebilir mi? İşte Açılır menü düzgün çalışmıyor
<!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>