CSS + Jquery 아코디언 메뉴.. ㅜㅜ > css

본문 바로가기
사이트 내 전체검색

회원로그인

그누팁

그누팁더보기

접속자집계

오늘
263
어제
313
최대
359
전체
9,850

css

CSS + Jquery 아코디언 메뉴.. ㅜㅜ

페이지정보

글쓴이 최고관리자 조회 81 조회 날짜 19-04-12 00:14
댓글 0 댓글

내용


아코디언메뉴를 만들어달라고 해서 간단하게 생각하고 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>   

 

 

 

기본적인 뼈대만 공유할게요 나머지는 작업하시면서 추가하시면 될것같습니다.

 

오늘도 좋은하루 보내세요..

댓글목록

댓글이 없습니다

GNUBOARD_M
Copyright © 소유하신 도메인. All rights reserved.