CSS + Jquery 아코디언 메뉴.. ㅜㅜ 정보
CSS + Jquery 아코디언 메뉴.. ㅜㅜ본문
아코디언메뉴를 만들어달라고 해서 간단하게 생각하고 OK했는데..
인터넷상에 제대로 된 샘플이 많이 없더라구요
한 여덟가지 테스트하다가 그나마 하나 건져서 수정하고 수정해서 완성하였습니다.
구성은 세가지에요. 스타일시트로 기초 모양잡기.
Jquery로 클릭시 이벤트.
스타일시트-----------------------------------
<style>
#accordian li{ list-style:none !important; list-style-type:none !important; margin-bottom: 10px;}
#accordian li >h3{ cursor:pointer;}
li > ul{ display:none; list-style:none !important; list-style-type:none !important;}
li > ul > li{ color:#000; list-style:none !important; list-style-type:none !important;}
li > ul > li > table{ margin-top:10px; margin-bottom:10px;}
</style>
제이쿼리 --------------------------------------
$(function(){
$("#accordian h3").click(function(){
var clickval = ($(this).attr('id'));
// 아래부분은 열렸을때 +가 닫혔을때 -를 구현한건데.. 짜지퍼 프로그래머다보니
// 마땅히 스마트하게 처리할 수 있는 방법이 생각이 안나 그냥 손노가다 했습니다.
var plus1 = $("#plus1").text();
var plus2 = $("#plus1").text();
var plus3 = $("#plus1").text();
var plus4 = $("#plus1").text();
var plus5 = $("#plus1").text();
if(clickval == 'acc1'){
if($("#plus1").text() == '-'){
$("#plus1").text(plus1.replace('-', '+'));
}else{
$("#plus1").text(plus1.replace('+', '-'));
}
$("#plus2").text(plus2.replace('-', '+'));
$("#plus3").text(plus3.replace('-', '+'));
$("#plus4").text(plus4.replace('-', '+'));
$("#plus5").text(plus5.replace('-', '+'));
}
if(clickval == 'acc2'){
if($("#plus2").text() == '-'){
$("#plus2").text(plus2.replace('-', '+'));
}else{
$("#plus2").text(plus2.replace('+', '-'));
}
$("#plus1").text(plus1.replace('-', '+'));
$("#plus3").text(plus3.replace('-', '+'));
$("#plus4").text(plus4.replace('-', '+'));
$("#plus5").text(plus5.replace('-', '+'));
}
if(clickval == 'acc3'){
if($("#plus3").text() == '-'){
$("#plus3").text(plus3.replace('-', '+'));
}else{
$("#plus3").text(plus3.replace('+', '-'));
}
$("#plus1").text(plus1.replace('-', '+'));
$("#plus2").text(plus2.replace('-', '+'));
$("#plus4").text(plus4.replace('-', '+'));
$("#plus5").text(plus5.replace('-', '+'));
}
if(clickval == 'acc4'){
if($("#plus4").text() == '-'){
$("#plus4").text(plus4.replace('-', '+'));
}else{
$("#plus4").text(plus4.replace('+', '-'));
}
$("#plus1").text(plus1.replace('-', '+'));
$("#plus2").text(plus2.replace('-', '+'));
$("#plus3").text(plus3.replace('-', '+'));
$("#plus5").text(plus5.replace('-', '+'));
}
if(clickval == 'acc5'){
if($("#plus5").text() == '-'){
$("#plus5").text(plus5.replace('-', '+'));
}else{
$("#plus5").text(plus5.replace('+', '-'));
}
$("#plus1").text(plus1.replace('-', '+'));
$("#plus2").text(plus2.replace('-', '+'));
$("#plus3").text(plus3.replace('-', '+'));
$("#plus4").text(plus4.replace('-', '+'));
}
$("#accordian ul ul").slideUp();
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
HTML-------------------------------------
<div id="accordian">
<ul>
<li>
<h3 id="acc1">제목<span id="plus1">+</span></h3>
요약
<ul>
<li>
펼쳐질 실 내용
</li>
</ul>
</li>
<li>
<h3 id="acc2">제목<span id="plus2">+</span></h3>
요약
<ul>
<li>
펼쳐질 실 내용
</li>
</ul>
</li>
<li>
<h3 id="acc3">제목<span id="plus3">+</span></h3>
요약
<ul>
<li>
펼쳐질 실 내용
</li>
</ul>
</li>
<li>
<h3 id="acc4">제목<span id="plus4">+</span></h3>
요약
<ul>
<li>
펼쳐질 실 내용
</li>
</ul>
</li>
<li>
<h3 id="acc5">제목<span id="plus5">+</span></h3>
요약
<ul>
<li>
펼쳐질 실 내용
</li>
</ul>
</li>
</ul>
</div>
기본적인 뼈대만 공유할게요 나머지는 작업하시면서 추가하시면 될것같습니다.
오늘도 좋은하루 보내세요..
3
댓글 5개
content: '\02795'; /* (+) 표시*/
font-size: 13px;
color: #000;
float: right;
margin-left: 5px;
}
#plus.active:after {
content: "\2796"; /* active 되면 (-) 표시 */
}