개발팁

0 1,559 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>   

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

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



읽어주셔서 감사합니다.


등록자 인끼 내용

고도몰 추가 빌드 출력방식 omg 컨트롤러경로 : /module/Controller/Front/Goods/GoodsViewController.php <pre class="line-numbers&…
고도몰 추가빌드 POST갑 DB에 입력방식 omg 파일경로 : /module/Component/Goods/GoodsAdmin.php <pre class="line-numbers"><code cl…
고도몰 업데이트 코드 omg <pre> public function saveInfoGoods($arrData) { //추가코드 (먼저 추가코드 실행하고 후에 원래코드 실행하…

Comments (0)

인기내용

고도몰 추가 빌드 출력방식 omg 컨트롤러경로 : /module/Controller/Front/Goods/GoodsViewController.php <pre class="line-numbers&…
고도몰 추가빌드 POST갑 DB에 입력방식 omg 파일경로 : /module/Component/Goods/GoodsAdmin.php <pre class="line-numbers"><code cl…

사진작품

Log in
Register