Accordion Menu in jQuery(another way)/ 제이쿼리로 아코디언 메뉴 만들기2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>JQuery accordion Menu</title>
<style>
body * {margin:0; padding:0; font-family:Malgun gothic; list-style:none;}
.accordion {width:202px; overflow:hidden; border-bottom:1px solid #ccc; padding-left:5px; padding-top:5px }
.accordion * {font-size:13px; text-decoration:none;}
.accordion li {width:200px; vertical-align:top; border-left:1px solid #ccc; border-right:1px solid #ccc;}
.accordion li a {padding:10px; border-top:1px solid #ccc; display:block; background:#fafafa; color:#555;}
.accordion li a.more {background:#fafafa url(../images/icon_down.gif) no-repeat 180px center;}
.accordion li a.less {background:#fafafa url(../images/icon_up.gif) no-repeat 180px center;}
.accordion li ul {border-top:1px solid #ddd; vertical-align:top;}
.accordion li ul li {border:none;}
.accordion li ul li a {border:none; padding:5px 15px; background:#fff;}
.accordion li.active {border:1px solid #aaa;}
.accordion li.active a {color:#222; font-weight:bold;}
.accordion li.active ul li a {font-weight:normal;}
.accordion li.active ul li.active {border:none;}
.accordion li.active ul li.active a {font-weight:bold;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion li:has(ul)").click(function(event){
if ( $(this).hasClass("active") ){
$(this).removeClass("active");
$(this).children("ul").slideUp(400);
}
else{
$(".accordion li:has(ul)").each(function() {
if ( $(this).hasClass("active") ){
$(this).removeClass("active");
$(this).children("ul").slideUp(400);
}
});
$(this).addClass("active");
$(this).children("ul").slideDown(400);
}
});
$(".accordion li ul li").click(function(event){
$(".accordion li ul li").each(function() {
if ( $(this).hasClass("active") ){
$(this).removeClass("active");
}
});
$(this).addClass("active");
});
});
</script>
</head>
<body>
<ul class="accordion">
<li>
<a href="#">menu_1</a>
<ul style="display:none;">
<li><a href="#">menu1-sub1</a></li>
<li><a href="#">menu1-sub2</a></li>
<li><a href="#">menu1-sub3</a></li>
</ul>
</li>
<li>
<a href="#">menu_2</a>
<ul style="display:none;">
<li><a href="#">menu2-sub1</a></li>
<li><a href="#">menu2-sub2</a></li>
<li><a href="#">menu2-sub3</a></li>
</ul>
</li>
<li>
<a href="#">menu_3</a>
<ul style="display:none;">
<li><a href="#">menu3-sub1</a></li>
<li><a href="#">menu3-sub2</a></li>
<li><a href="#">menu3-sub3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------a simple but same jQuery source..
<script>
$(document).ready(function(){
$('ul.accordion > li > a').click(function(){
$('ul.accordion > li > ul').not($(this).next()).slideUp();
$(this).parent().siblings().removeClass('on');
$(this).parent().toggleClass('on');
$(this).next().slideToggle();
});
});
</script>
--------------------------------------------------------------------------------------------
* Click each menu to unfold the accordion menu.
댓글
댓글 쓰기