Accordion메뉴

Front_H·2020년 11월 26일
0

HTML

목록 보기
13/14
    아코디언 aria
    1) role 
        아코디언 패널 role="region"    // 충분히 중요하다 인식 할 수있는 섹션을 포함하는 콘텐츠

    2) property
        아코디언 헤더 aria-controls="연결된 아코디언 패널의 ID"   // 어떤 상세 컨텐츠를 컨트롤할 수 있는지?
        아코디언 패널 aria-labelledby="연결된 아코디언 헤더의 ID" // 컨텐츠를 리드하고있는 요소가 무엇인지?

    3) state(script로 제어)
        아코디언 헤더 
          aria-expanded: true(현재 펼쳐져있는 상태)/false(현재 닫겨져있는 상태)  - 버튼 전부에게 주는 속성
          aria-disabled: true(비활성 상태) / false(활성 가능한 상태)  - 클릭한 버튼 하나에게만 주는 속성

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title> 아코디언 수직 방향으로 열리기1 </title>
    <link rel="stylesheet" href="css/ver1.css">
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="js/ver1.js"></script>
</head>
<body>
    <section id="content">
        <h2>자주 찾는 질문</h2>
        <div id="faqAccordion" class="accordion">
            <h3 class="tit on">
                <button id="aHeader1" class="accorheader first" type="button" aria-controls="aPanel1">
                    <span class="blind_b">질문</span>
                    A) 질문 상품을 한 번에 주문했는데 일부는 도착하지 않았습니다. 배송확인은 어떻게 해야 하나요?
                </button>
            </h3>
            <div id="aPanel1" class="accopanel" role="region" aria-labelledby="aHeader1" >
                <p>주문 상품 중 일부만 수령했을 경우 다음과 같은 사유로 상품이 개별 배송될 수 있으므로 참고 부탁드립니다. </p>
                <strong> 1) 동일 상품이 아닌 경우</strong>
                <ul>
                    <li>- 신세계백화점, 이마트점포, 협력업체, 트레이더스, 부츠 등 상품이 발송되는 주체별로 배송일이 다름</li>
                    <li>- 협력업체 상품일 경우 각 업체 별 상품 입고 및 출하시기가 다름 </li>
                </ul>
                <strong> 2) 동일 상품인 경우</strong>
                <ul>
                    <li>- 상품의 특성상 대형 가전, 가구, 산지 직송 상품, 고중량의 상품 등은 중량 및 수량에 따라 1개 이상의 송장번호로 나뉘어 배송 될 수 있음 <br>
                        배송되지 않은 상품에 대한 배송정보는 [ MY SSG > MY주문관리 > 주문/배송 조회]에서 확인 가능하며, <br>
                        해당 주문/배송 조회에서 확인되지 않을 경우 고객상담 센터로 연락 부탁드립니다.
                    </li>
                </ul>
            </div>

            <h3 class="tit">
                <button id="aHeader2" class="accorheader" type="button" aria-controls="aPanel2">
                    <span class="blind_b">질문</span>
                    A) 질문 상품을 한 번에 주문했는데 일부는 도착하지 않았습니다. 배송확인은 어떻게 해야 하나요?
                </button>
            </h3>
            <div id="aPanel2" class="accopanel" role="region" aria-labelledby="aHeader2" >
                <p>주문 상품 중 일부만 수령했을 경우 다음과 같은 사유로 상품이 개별 배송될 수 있으므로 참고 부탁드립니다. </p>
                <strong> 1) 동일 상품이 아닌 경우</strong>
                <ul>
                    <li>- 신세계백화점, 이마트점포, 협력업체, 트레이더스, 부츠 등 상품이 발송되는 주체별로 배송일이 다름</li>
                    <li>- 협력업체 상품일 경우 각 업체 별 상품 입고 및 출하시기가 다름 </li>
                </ul>
                <strong> 2) 동일 상품인 경우</strong>
                <ul>
                    <li>- 상품의 특성상 대형 가전, 가구, 산지 직송 상품, 고중량의 상품 등은 중량 및 수량에 따라 1개 이상의 송장번호로 나뉘어 배송 될 수 있음 <br>
                        배송되지 않은 상품에 대한 배송정보는 [ MY SSG > MY주문관리 > 주문/배송 조회]에서 확인 가능하며, <br>
                        해당 주문/배송 조회에서 확인되지 않을 경우 고객상담 센터로 연락 부탁드립니다.
                    </li>
                </ul>
            </div>

            <h3 class="tit">
                <button id="aHeader3" class="accorheader last" type="button" aria-controls="aPanel3">
                    <span class="blind_b">질문</span>
                    A) 질문 상품을 한 번에 주문했는데 일부는 도착하지 않았습니다. 배송확인은 어떻게 해야 하나요?
                </button>
            </h3>
            <div id="aPanel3" class="accopanel" role="region" aria-labelledby="aHeader3" >
                <p>주문 상품 중 일부만 수령했을 경우 다음과 같은 사유로 상품이 개별 배송될 수 있으므로 참고 부탁드립니다. </p>
                <strong> 1) 동일 상품이 아닌 경우</strong>
                <ul>
                    <li>- 신세계백화점, 이마트점포, 협력업체, 트레이더스, 부츠 등 상품이 발송되는 주체별로 배송일이 다름</li>
                    <li>- 협력업체 상품일 경우 각 업체 별 상품 입고 및 출하시기가 다름 </li>
                </ul>
                <strong> 2) 동일 상품인 경우</strong>
                <ul>
                    <li>- 상품의 특성상 대형 가전, 가구, 산지 직송 상품, 고중량의 상품 등은 중량 및 수량에 따라 1개 이상의 송장번호로 나뉘어 배송 될 수 있음 <br>
                        배송되지 않은 상품에 대한 배송정보는 [ MY SSG > MY주문관리 > 주문/배송 조회]에서 확인 가능하며, <br>
                        해당 주문/배송 조회에서 확인되지 않을 경우 고객상담 센터로 연락 부탁드립니다.
                    </li>
                </ul>
            </div>
        </div>
    </section>
</body>
</html>

CSS

@charset "utf-8";
*{margin: 0;padding: 0;}
ul{list-style: none;}
h2,h2{font-size: 100%;}
section{display: block;}
button{border:none;background: none;cursor:pointer;font-size:inherit;font-family: inherit;color: inherit;
line-height:inherit;}

.blind_b{width: 1px;height: 1px;overflow: hidden;border:none;position: absolute;clip:rect(1px,1px,1px,1px);clip-path: inset(50%);}

body{font-family: "맑은 고딕", "Malgun Gothic";font-size: 14px;color: #333;}

#content{width: 1200px;margin: 50px auto;}
#content h2{font-size: 23px;text-align: center;margin-bottom: 50px;}
#faqAccordion{border-bottom: 1px solid #aaa;}
#faqAccordion .accopanel + .tit{border-top: 1px solid #aaa;}
#faqAccordion .accorheader{position: relative;font-size: 16px;padding: 23px 160px 23px 35px;text-align: left;background: url("../images/bu_faq_q.png") no-repeat left center;line-height: 24px;width: 100%;}
#faqAccordion .accorheader::after{content:"";position: absolute;top: 30px;right: 30px;width: 16px;height: 9px;background: url("../images/ico.png");}
#faqAccordion .tit.on .accorheader::after{background-position: right top;}

#faqAccordion .accopanel{display: none;padding: 35px;background: #eee;font-size: 14px;}

JQuery

$(document).ready(function () {
    var _acco = $('.accordion');

    //1)로딩 설정 : .tit 첫번째에 .on 추가, 바로 뒤 형제 아코디언 패널 보여지게, 포커스 갈 수있도록 tabIndex 추가, aria의 state설정
    _acco.find('.tit:first').addClass('on').next().show().attr('tabindex', 0);
    _acco.find('.tit:first .accorheader').attr({'aria-expanded': true,'aria-disabled': true}).parent().siblings('.tit').children().attr({'aria-expanded': false,'aria-disabled': false});


    //2)아코디언 헤더에 keydown 이벤트 선언 : 위아래 방향키, HOME키, END키, 엔터키, 스페이스바 제어 => switch - case문
    _acco.find('.accorheader').on('keydown', function (e) {
        var key = e.keyCode;
        console.log(key);
        //아래40 위38 HOME36 END35 Enter13 Spacebar32
        switch (key) {
            case 40: //아래 방향키 
                if($(this).hasClass('last')){ //마지막 버튼인 경우 ==> 맨 처음 버튼으로 이동
                    $(this).closest('.accordion').find('.first').focus();
                }else{//마지막 버튼이 아니여서 다음 버튼으로 이동할 수 있는 경우
                    $(this).parent().next().next().children().focus();
                }
                break;
            case 38: //위 방향키
                if($(this).hasClass('first')){ //첫번째 버튼인 경우 ==> 맨 마지막 버튼으로 이동
                    $(this).closest('.accordion').find('.last').focus();
                }else{//첫번째 버튼이 아니여서 이전 버튼으로 이동할 수 있는 경우
                    $(this).parent().prev().prev().children().focus();
                }
                break;
            case 36: //HOME키
                e.preventDefault();
                $(this).closest('.accordion').find('.tit .first').focus();
                break;
            case 35: //END키   
                e.preventDefault(); 
                $(this).closest('.accordion').find('.tit .last').focus();
                break;
            case 13: //Enter키
            case 32: //Spacebar키            
                $(this).trigger('click');
                break;
        }
    });

    //3)아코디언 헤더 click 이벤트 : 열려져있는 아코디언패널의 아코디언헤더는 클릭할 수 없다. 열려지지 않은 패널만 제어
    _acco.find('.accorheader').on('click',function(){
        if(!$(this).parent().hasClass('on')){
            // 현재 버튼에 aria속성 변경 => 부모 클래스on추가 => 나머지 형제 중 .tit.on을 찾아서 클래스 on을 제거 => 자식 버튼 aria속성 변경,제거
            $(this).attr({'aria-expanded':true, 'aria-disabled':true}).parent().addClass('on').siblings('.tit.on').removeClass('on').children().attr('aria-expanded',false).removeAttr('aria-disabled');

            //열리고 닫기 제어 
            $(this).parent().next().stop().slideDown('fast').attr('tabIndex',0).siblings('.accopanel').stop().slideUp('fast').attr('tabIndex',-1);
        }
    });
});

profile
drop the bit 0 and 1

0개의 댓글