[jquery] - 카테고리 펼치기 접기 만들기
카테고리가 많을때 세로로 길게 나열된 것을 보면 보기 싫을때가 있다. jquery를 이용해 메인 카테고리를 기준으로 접고 펼칠 수 있다.
아래 코드를 기준으로 시작하겠다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="box">
<li class="main">
test
<ul class="sub">
<li>test1</li>
<il>test2</il>
</ul>
</ul>
</div>
</body>
</html>
서브 카테고리가 일단 보이지 않아야 하기 때문에 sub class에 style을 아래와 같이 추가한다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="box">
<li class="main">
test
<ul class="sub" style="display:none">
<li>test1</li>
<il>test2</il>
</ul>
</ul>
</div>
</body>
</html>
그리고 main 을 클릭했을때, 서브 카테고리가 보이게끔 아래와 같이 jquery를 작성해준다.
main을 클릭할시 sub가 웹 페이지에 보일시( is(":visible") ), css() 함수로 display 속성을 none으로 바꾼다.
sub가 웹 페이지에 보이지 않을 시, css() 함수로 display 속성을 block으로 바꾼다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="box">
<li class="main">
test
<ul class="sub" style="display:none">
<li>test1</li>
<il>test2</il>
</ul>
</ul>
</div>
<script>
$(".main").click(function(){
if($(".sub").is(":visible")){
$(".sub").css("display","none");
}
else{
$(".sub").css("display","block");
}
})
</script>
</body>
</html>
이를 부드럽게 접히거나 펼쳐기게끔 slideUp(), slideDown() 함수를 사용해보자.
아래 코드를 테스트 해보면 부르럽게 서브 카테고리가 펼쳐지고 접히는 것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="box">
<li class="main">
test
<ul class="sub" style="display:none">
<li>test1</li>
<il>test2</il>
</ul>
</ul>
</div>
<script>
$(".main").click(function(){
if($(".sub").is(":visible")){
$(".sub").slideUp();
}
else{
$(".sub").slideDown();
}
})
</script>
</body>
</html>
만약 카테고리를 여러개 만들어서 각각에 이러한 효과를 주고 싶다면 아래 글을 읽어보는 것을 추천한다.
[jquery] - this를 이용한 코드 중복 방지
jquery 사용시 같은 class나 id를 가진 태그가 예를들어 클릭이 되었을때 각 상황에 맞는 함수를 실행하려고 한다면 비효율적으로 작성 할 수도 있다. 하지만 this 를 사용하면 코드의 길이와 중복을 피할 수 있다..
lactea.kr
Reference
'Code' 카테고리의 다른 글
| [jquery] - this를 이용한 코드 중복 방지 (0) | 2019.10.12 |
|---|---|
| [web] - javascript로 unix timestamp 변환하기 (0) | 2019.08.07 |
| [python] - beautiful soup를 이용한 웹 크롤러 만들기 (0) | 2019.04.06 |
| [python] - requests 모듈을 이용한 웹 요청 (0) | 2019.04.06 |
| [python] – sha256 암호화 및 복호화 (0) | 2019.04.06 |