| jQuery length와 slideToggle 예제 |
|
|
  |
8년 전
|
본 글은 jQuery의 'length'와 'slideToggle'에 대한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>length 예제.</title>
<style>
html, body, ul, ol, dl, h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0;}
ul,ol,dl {list-style: none;}
a {color: #454545; text-decoration: none; outline: none;}
header nav {padding: 20px;}
header nav h3 {margin-bottom: 20px; cursor: pointer;}
header nav > ul > li {margin-bottom: 15px;}
header nav > ul > li li {display: block; margin-left: 7px; padding: 3px; font-size: 14px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Category Count
jQuery('#gnb ul').each(function(){
var totalCateNum = jQuery(this).children('li').length;
jQuery(this).prev('h4').children('span').append(totalCateNum);
return true;
});
jQuery('header nav h3 span').append(jQuery('#gnb li').length-jQuery('#gnb h4').length);
// 카테고리 클릭시 메뉴토글
$('header nav h3').click(function(){
$('#gnb ul').stop().slideToggle(400); // 연속 클릭시 클릭 수 만큼 애니메이션이 동작하지 않도록 .stop()을 걸어주었음.
});
});
</script>
</head>
<body>
<header>
<nav>
<h3>카테고리 (<span></span>)</h3>
<ul id="gnb">
<li>
<h4>분류명1 (<span></span>)</h4>
<ul class="subCate">
<li><a href="#">카테고리1-1</a></li>
<li><a href="#">카테고리1-2</a></li>
<li><a href="#">카테고리1-3</a></li>
<li><a href="#">카테고리1-4</a></li>
</ul>
</li>
<li>
<h4>분류명2 (<span></span>)</h4>
<ul class="subCate">
<li><a href="#">카테고리2-1</a></li>
<li><a href="#">카테고리2-2</a></li>
<li><a href="#">카테고리2-3</a></li>
</ul>
</li>
<li>
<h4>분류명3 (<span></span>)</h4>
<ul class="subCate">
<li><a href="#">카테고리3-1</a></li>
<li><a href="#">카테고리3-1</a></li>
</ul>
</li>
<li>
<h4>분류명4 (<span></span>)</h4>
<ul class="subCate">
<li><a href="#">카테고리4-1</a></li>
<li><a href="#">카테고리4-2</a></li>
<li><a href="#">카테고리4-3</a></li>
</ul>
</li>
<li>
<h4>분류명5 (<span></span>)</h4>
<ul class="subCate">
<li><a href="#">카테고리5-1</a></li>
<li><a href="#">카테고리5-2</a></li>
<li><a href="#">카테고리5-3</a></li>
<li><a href="#">카테고리5-4</a></li>
<li><a href="#">카테고리5-5</a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html> |
|
 추천 : 265 |
추천
목록
|
|
