• 포토폴리오
  • 그누스킨
  • 소스팁
  • 제작의뢰
  • 질문답변
  • 공지사항
  • 로그인
  • 회원가입
  • CSS + Jquery 아코디언 메뉴.. ㅜㅜ

    페이지 정보

    개발자  0 Comments  168 Views  19-10-26 21:58  Css

    본문

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



     



     



     



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



     



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



    읽어주셔서 감사합니다.

    댓글목록

    등록된 댓글이 없습니다.

    Copyrightⓒ heogeol.com All rights reserved.