CSS + Jquery 아코디언 메뉴.. ㅜㅜ > 그누보드5 팁자료실

그누보드5 팁자료실

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
스폰서링크

댓글 전체

#plus:after {
    content: '\02795'; /* (+) 표시*/
    font-size: 13px;
    color: #000;
    float: right;
    margin-left: 5px;
}

#plus.active:after {
    content: "\2796"; /* active 되면 (-) 표시 */
}
전체 1,225 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT