개발팁

0 646 0

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

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



 



 



 



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



 



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



읽어주셔서 감사합니다.


광고위치

등록자 인끼 내용

PHP 웹페이지 파싱 클래스 (웹페이지 긁… omg 웹페이지 소스를 파싱하는 클래스입니다. url과 정규식을 입력하면 파싱결과를 뱉어줍니다. curl을 사용하였기 때문에 fopen과 달리 PHP설정이 all…
PHP EXCEL 엑셀 업로드 방법 omg <pre> &lt;?php include_once('./_common.php'); include_once(G5_PATH.'/head.sub.php'); incl…
CSS + Jquery 아코디언 메뉴.. … omg 아코디언메뉴를 만들어달라고 해서 간단하게 생각하고 OK했는데.. 인터넷상에 제대로 된 샘플이 많이 없더라구요 한 여덟가지 테스트하다가 그나마 하나 건져서 …

Comments (0)

인기내용

PHP 웹페이지 파싱 클래스 (웹페이지 긁… omg 웹페이지 소스를 파싱하는 클래스입니다. url과 정규식을 입력하면 파싱결과를 뱉어줍니다. curl을 사용하였기 때문에 fopen과 달리 PHP설정이 all…
PHP EXCEL 엑셀 업로드 방법 omg <pre> &lt;?php include_once('./_common.php'); include_once(G5_PATH.'/head.sub.php'); incl…
광고위치

사진작품

Log in
Register