[JQuery] lnb 접근성

마우스만으로 동작하는 기본 스크립트들을 만들어 놓다가
늘어나는 접근성 프로젝트 들에 의해서 포커스를 이젠 포함하게 되었다.

유지 보수 할때는 그냥 click 로 되어 있는 js들을 그대로 긁어다가 해당 하는 부분들만 focus로 바꾸면서 작업했는데 이것도 하나씩 정리를 해야겠는데...ㅠ;

접근성 쪽으로 더 나아간다면 서브 컨텐츠들이 너무 많다면 텝 으로 건너갈 시에 서브를 다 지나갈건지 주 매뉴만 갈건지 등, 논의 요소들이 있으니 주의가 필요함.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
lnb();//lnb 호출
});
//lnb
function lnb(){
var $subBox = $(".lnb .sub_box"), $lnbSub = $(".lnb .tit_lnb a");  
$subBox.hide(); 
$lnbSub.each(function(index){
$(this).bind("click focus", function(){
$subBox.hide(); 
$subBox.eq(index).show(); 
$lnbSub.find("img").each(function(){

$(this).attr("src",$(this).attr("src").replace("_on","_off"));

});

$(this).find("img").attr("src", $(this).find("img").attr("src").replace("_off","_on"));

});
});
}
</script>

<div class="lnb">
<ul>
<li>
<p class="tit_lnb"><a href="#"><img src="../images/lnb_01_off" alt="" /></a></p>
<ul class="sub_box">
<li><a href="#">1</a></li>
</ul>
</li>
<li>
<p class="tit_lnb"><a href="#"><img src="../images/lnb_02_off" alt="" /></a></p>
<ul class="sub_box">
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li>
<p class="tit_lnb"><a href="#"><img src="../images/lnb_03_off" alt="" /></a></p>
<ul class="sub_box">
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</div>

.bind

http://api.jquery.com/bind/
- 한개 이상의 이벤트를 묶어서 사용하고 싶을 때 사용!!!