[jquery] 웹접근성 관련 slideDown을 사용하지 않은 아코디언 메뉴

처음 메뉴를 클릭하면 서브 메뉴들이 내려오는 스크립트를 만들때 jquery의 .hide, .show, slideDown 을 사용했었는데

위 함수들은 스타일에 display:none 혹은 display:block 이 들어가게 되어

스크린 리더기를 통해 테스트 하는 웹 접근성에 문제가 있다고 하여

관련된 함수들이 있는 jquery core를 수정해야되나.. 고민을 하다가 animate 함수로 해결하였습니다.

function menuclick(index){

var height = new Array(1); //메뉴가 내려올 height를 담은 배열

height[0] = '280px';

for(var i=1; i<8; i++){ //열려야 하는 서브메뉴 7개를 처음에는 모두 숨깁니다.

$("#sub"+i).addClass("hidden"); //hidden 클래스는 css를 통해 display:none과 비슷한 기능을 하도록 미리 만들어진것입니다.

}

$("#sub"+index).removeClass("hidden"); //현재 눌려진 메뉴의 hidden class를 지워줍니다.

$("#sub"+index).animate({ //hidden 클래스는 지웠지만 일단은 보여지지 않아야 하므로 height 0으로 맞춰 보이지 않도록 합니다.

'height' : '0px'

},0);

$("#sub"+index).animate({ //height 0 이었던 서브메뉴가 배열에 담겨진 height 만큼 늘어납니다.

'height' : height[index]

},600);

}

간단하게 설명하자면 이렇습니다.

암튼 오늘도 한고비 엉성하게 겨우 넘기네요..