게시판 Q&A등 아코디언 메뉴만들기

아코디언 메뉴만들기

게시판, Q&A에 많이 쓰는 형태다! 

먼저 완성된 모습!

F&Q

• • F
  • 카테고리1
  • 아코디언 메뉴는 어떻게 만드나요?
• • A
  • 그러게요.. 그거 어떻게 만드는건가요.. 그냥 갖다 쓰면 안되나요? 내가 굳이 만들어야 하나요? 휴.. 그래도 배웠으니 연습해야지ㅜ
• • F
  • 카테고리1
  • 아코디언 메뉴는 어떻게 만드나요?
• • A
  • 그러게요.. 그거 어떻게 만드는건가요.. 그냥 갖다 쓰면 안되나요? 내가 굳이 만들어야 하나요? 휴.. 그래도 배웠으니 연습해야지ㅜ
• • F
  • 카테고리1
  • 아코디언 메뉴는 어떻게 만드나요?
• • A
  • 그러게요.. 그거 어떻게 만드는건가요.. 그냥 갖다 쓰면 안되나요? 내가 굳이 만들어야 하나요? 휴.. 그래도 배웠으니 연습해야지ㅜ

우선 HTML을 짜보아용. 게시판은 순서대로 아래로 쭉내려와 있으니 ul에 li를 사용해서 만들어보려구요!

html

 
      <h1>F&amp;A</h1>
    <ul class="fnq">
        <li class="f_question1">
            <ul class="clearfix">
                <li>F</li>
                <li>카테고리1</li>
                <li>아코디언 메뉴는 어떻게 만드나요?</li>
                <li><i class="fa fa-angle-double-up"></i></li>
            </ul>
            <a href="#" class="f_q_link"></a>
        </li>
        <li class="f_answer1">
            <ul class="clearfix">
                <li>A</li>
                <li>그러게요.. 그거 어떻게 만드는건가요.. 그냥 갖다 쓰면 안되나요? 내가 굳이 만들어야 하나요? 휴.. 그래도 배웠으니 연습해야지ㅜ</li>
                <li></li>
            </ul>
        </li>
    </ul>
 

이러한 형태를 반복해서 만들어줍니다. 

css

        *{padding:0;margin: 0;}
        ul li{list-style: none;}
        .clearfix:after{content: "";display: block;clear: both;}
        h1{text-align: center;padding: 20px 0;}
        .f_question1>ul>li,.f_answer1>ul>li{float: left;}
        .fnq{width: 70%;line-height:300%;margin: 0 auto;}
        .f_question1{position: relative}
        .f_answer1{background: #eee;display: none;}
        .f_answer1.on{display: block;}
        .f_question1>ul>li:nth-child(1){width: 7%;text-align: center;}
        .f_answer1>ul>li:nth-child(1){width: 7%;text-align: center;}
        .f_question1>ul>li:nth-child(2){width: 13%;text-align: center;}
        .f_question1>ul>li:nth-child(3){width:75%; }
        .f_question1>ul>li:nth-child(4){width:5%; }
        .f_q_link{width: 100%;height: 100%;position:absolute;top: 0;left: 0;}

CSS에서 중요한 점은 처음에는 답변박스(li.f_answer1)를 안보이게 해준다. (display:none)

그리고 임의에 클래스(on)을 만들어 display:block를 넣어준다.  

제이쿼리에서 이 클래스(on)를 붙여 안보였던, 답변박스가 보여지도록 할 예정이다. 

jqurey

$(function(){
      var className =""  //변수를 선언한다.
        
       $('.f_q_link').on({    //버튼을
 
           click: function(){  //클릭했을때 
 
                className=$(this).parent().next().attr('class').slice(-2); 
                //보여줄 li의 class이름을 뒤에서 두자리(on)를 변수에 담는다.
 
               if(className=='on'){  //만약 클래스명이 'on'이면
 
                   $(this).parent().next().removeClass('on'); //class'on' 삭제
 
                  $(this).prev().children().eq(3).children()
                  .css({transform:'rotate(0deg)',transition:'all 0.4s',color:'#000'});
                   //화살표 아이콘의 원래 css로 돌리기
               }
               else if(className!='on'){  //만약 클래스명이 'on'이 아니면
 
                   $(this).parent().next().addClass('on');  //class'on' 추가
 
                  $(this).prev().children().eq(3).children()
                 .css({transform:'rotate(180deg)',transition:'all 0.4s',color:'#7070ea'});  
                  // 화살표 아이콘 css 수정
               }
                
            }
           
        });
        
    });
           

className이라는 변수를 먼저 만들고, 거기에 on이라는 클래스를 담았어요.

그리고 클래스 on이 붙어있을때랑 on일 안 붙어있을때를 if 구문을 활용해서 나눴습니다.

클래스 on이 붙어있을때는 removeClass로 클래스 on를 지우고

클래스 on이 안 붙어있을때는 addClass로 클래스 on를 넣어줬어요!

색깔 다 똑같아서 가독성이 떨어지네요ㅜㅜ

고치기 넘 귀찮아 그냥 올립니당.

**열심히 적었으나 오류가 있을 수 있으니 너무 신뢰하지 마세요:) ㅎㅎ