[jQuery] 15.실습:sole(탐색)
실습: sole
/*----------- sole.css -----------------*/
*{
margin:0;
padding:0;
box-sizing:border-box;
font-weight:bold;
}
li{
list-style:none;
}
a{
text-decoration:none;
}
.wrap{
width:100%;
margin:auto;
}
.container{
width:500px;
max-width:500px;
margin:auto;
}
.headerbg{
width:100%;
background: #333333;
}
.header{
height:70px;
overflow:hidden;
}
.header h1{
height:100%;
color:#99ff66;
padding:10px;
font-size:32px;
margin-left:20px;
float:left;
}
.nav-button{
float:right;
height:100%;
}
.nav-button ul{
display:flex;
height:100%;
}
.nav-button li{
background: #808080;
margin-left:5px;
margin-bottom:5px;
}
.nav-button a{
height:100%;
padding:15px 10px;
color:#99ff66;
display:block;
font-size:25px;
}
.navbg,.loginbg{
width:100%;
background: #808080;
}
.navbg{
display:none;
}
.nav{
height:170px;
text-align:center;
overflow:hidden;
}
.nav ul{
margin-top:10px;
float:left;
width:47%;
}
.nav li{
padding:5px 0;
color:#fff;
}
.nav ul a{
color:#99ff66;
}
.loginbg{
display:none;
}
.login{
padding-top:30px;
}
.login p{
color:#fff;
}
.login input,.login button{
width:100%;
padding:10px;
margin:10px 0;
border:0;
}
.login input{
background: #ffffcc;
}
.login button{
font-size: 24px;
background: #000;
color: #99ff66;
cursor:pointer;
}
.content{
margin-top:15px;
overflow:hidden;
}
.shoes{
width:100%;
height:300px;
}
.shoes img{
width:100%;
height:100%;
}
.shoesInfo{
float:left;
width:90%;
height:40px;
overflow:hidden;
padding:14px 10px;
background: #cccccc;
}
.shoesInfo li:nth-child(1){
float:left;
}
.shoesInfo li:nth-child(2){
float:right;
}
.content>button{
width:10%;
font-size:32px;
border:0;
color:#99ff66;
background: #808080;
height:40px;
float:left;
cursor:pointer;
}
.shoesdetail{
clear:both;
padding:10px;
}
.size{
margin-top:10px;
padding:10px;
}
.size li{
width:18%;
height:50px;
float:left;
margin-left:5px;
text-align:center;
background: #333333;
}
.size a{
padding:10px;
display:block;
font-size:24px;
color:#fff;
}
.shoesdetail{
background: #808080;
color:#fff;
display:none;
}
.shoesdetail>button{
width:100%;
border:0;
margin-top:10px;
padding:10px;
font-size: 24px;
background: #000;
cursor:pointer;
color: #ddd;
}
.on{
background: #99ff66 !important;
color:#000 !important;
}
/*----------- sole.js -----------------*/
$(function(){
var menuflag=0;
var loginflag=0;
var conflag1=0;
var conflag2=0;
var conflag3=0;
$('.menubt').click(function(){
menuflag=!menuflag;
if(menuflag==1){
$('.navbg').slideDown()
}else{
$('.navbg').slideUp()
}
})
$('.loginbt').click(function(){
loginflag=!loginflag;
if(loginflag==1){
$('.loginbg').slideDown()
}else{
$('.loginbg').slideUp()
}
})
//버튼을 누르면 모든 content가 동시에 움직이므로 탐색을 해야한다.
$('.content>button').click(function(){
var idx=$(this).attr('id')
if(idx==1){
conflag1=!conflag1;
}else if(idx==2){
conflag2=!conflag2;
}else if(idx==3){
conflag3=!conflag3;
}
if((idx==1&&conflag1==1)||(idx==2&&conflag2==1)||(idx==3&&conflag3==1))
$(this).next().slideDown() //button 옆을 슬라이드다운
else{
$(this).next().slideUp()
}
})
//탐색을 이용!
$('.size li a').click(function(e){
e.preventDefault()
$('.size li a').removeClass('on')
$(this).addClass('on')
$('.shoesdetail>button').removeClass('on')
$(this).closest('.size').next().addClass('on')
})
})
<!-------------------sole.html------------------->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sole.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="sole.js"></script>
<title>sole</title>
</head>
<body>
<div class="wrap">
<div class="headerbg">
<div class="header container">
<h1>sole</h1>
<div class="nav-button">
<ul>
<li class="menubt"><a href="#">MENU</a></li>
<li class="loginbt"><a href="#">LOGIN</a></li>
</ul>
</div>
</div>
</div>
<div class="navbg">
<div class="nav container">
<ul class="shoes">
<li><a href="#">SHOES</a></li>
<li>Women's Shoes</li>
<li>Men's Shoes</li>
<li>Shoe Accessories</li>
<li>Wholesale</li>
</ul>
<ul class="contact">
<li><a href="#">CONTACT</a></li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</div>
</div>
<div class="loginbg">
<div class="login container">
<form action="#">
<p>USERNAME</p>
<input type="text">
<p>PASSWORD</p>
<input type="password">
<br>
<button>SIGN IN</button>
</form>
</div>
</div>
<div class="content container">
<div class="shoes">
<img src="sole1.jpg" alt="">
</div>
<ul class="shoesInfo">
<li>신발 1</li>
<li>$35</li>
</ul>
<button id="1">></button>
<div class="shoesdetail">
<p>The ultimate in style and comfort, the Sole Air ll's are great for walking and casual wearing.</p>
<h4>size</h4>
<ul class="size">
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
<button>ADD TO CHART</button>
</div>
</div>
<div class="content container">
<div class="shoes">
<img src="sole2.jpg" alt="">
</div>
<ul class="shoesInfo">
<li>신발 2</li>
<li>$55</li>
</ul>
<button id="2">></button>
<div class="shoesdetail">
<p>The ultimate in style and comfort, the Sole Air ll's are great for walking and casual wearing.</p>
<h4>size</h4>
<ul class="size">
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
<button>ADD TO CHART</button>
</div>
</div>
<div class="content container">
<div class="shoes">
<img src="sole3.jpg" alt="">
</div>
<ul class="shoesInfo">
<li>신발 3</li>
<li>$25</li>
</ul>
<button id="3">></button>
<div class="shoesdetail">
<p>The ultimate in style and comfort, the Sole Air ll's are great for walking and casual wearing.</p>
<h4>size</h4>
<ul class="size">
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
<button>ADD TO CHART</button>
</div>
</div>
</div>
</body>
</html>
배움은 의무도 생존도 아니다