제이쿼리 focus 이벤트 질문
본문
안녕하세요 도저히 혼자 풀리지 않아서 질문해봅니다 .. 접근성 때문에 메뉴 focus와 blur이벤트를 주고 있는데, 포커스가 서브메뉴 2번째에만 가면 스크립트가 종료 되어 버리더라구요 .. 도움부탁드리겠습니다.
$(function() {
$('.gnb_wrap button.menu').click(function(e) {
if($(this).hasClass('on')) {
$(this).removeClass('on');
$('body').removeClass('all');
$(this).blur();
$('.gnb_wrap .all').stop().slideUp();
} else {
$(this).addClass('on');
$('body').addClass('all');
$(this).blur();
$('.gnb_wrap .all').stop().slideDown();
}
});
function m_nav(nav,option) {
var $nav = $(nav);
var $line = $nav.find('.line');
var speed = option.speed || 200;
var type = option.type || 'slide';
var bspeed = option.bspeed || 200;
var idx = option.idx || 0;
var $on_li = null;
if(idx > 0) {
$on_li = $(nav + " .gnb_large>li:nth-child("+idx+")");
$on_li.addClass('on');
var pos = $on_li.position();
var line_width = $on_li.outerWidth();
$line.stop().animate({left:(pos.left)+'px',width:line_width+'px'},bspeed);
}
$nav.find('.gnb_large>li').each(function(index, element) {
$(this).mouseenter(function(e) {
if(type == 'slide') $(this).find('.gnb_sub').stop().slideDown(speed);
else if(type == 'fade') $(this).find('.gnb_sub').stop().fadeIn(speed);
else $(this).find('.gnb_sub').stop().show(speed);
$(nav + ' .gnb_large>li').removeClass('on');
$(this).addClass('on');
var pos = $(this).position();
var line_width = $(this).outerWidth();
$line.stop().animate({left:(pos.left)+'px',width:line_width+'px'},bspeed);
});
$(this).mouseleave(function(e) {
if(type == 'slide') $(this).find('.gnb_sub').stop().slideUp(speed);
else if(type == 'fade') $(this).find('.gnb_sub').stop().fadeOut(speed);
else $(this).find('.gnb_sub').stop().hide(speed);
$(nav + ' .gnb_large>li').removeClass('on');
$line.stop().animate({left:0,width:0},bspeed);
if(idx > 0) {
$on_li.addClass('on');
var pos = $on_li.position();
var line_width = $on_li.outWidth();
$line.stop().animate({left:(pos.left)+'px',width:line_width+'px'},bspeed);
}
});
});
//여기서 부터 focus / blur 시작
$nav.find('.gnb_large>li').each(function(index, element) {
$('.gnb_large>li a').focus(function(e) {
if(type == 'slide') $(this).next('.gnb_sub').stop().slideDown(speed);
else if(type == 'fade') $(this).find('.gnb_sub').stop().fadeIn(speed);
else $(this).find('.gnb_sub').stop().show(speed);
$(nav + ' .gnb_large>li').removeClass('on');
$(this).addClass('on');
var pos = $(this).position();
var line_width = $(this).outerWidth();
$line.stop().animate({left:(pos.left)+'px',width:line_width+'px'},bspeed);
});
$('.gnb_sub li a').blur(function(e) {
if(type == 'slide') $(this).parents('.gnb_sub').stop().slideUp(speed);
else if(type == 'fade') $(this).find('.gnb_sub').stop().fadeOut(speed);
else $(this).find('.gnb_sub').stop().hide(speed);
$(nav + ' .gnb_large>li').removeClass('on');
$line.stop().animate({left:0,width:0},bspeed);
if(idx > 0) {
$on_li.addClass('on');
var pos = $on_li.position();
var line_width = $on_li.outWidth();
$line.stop().animate({left:(pos.left)+'px',width:line_width+'px'},bspeed);
}
});
});
}
//idx : 초기 on
//speed : 메뉴 모션속도
//bspeed : 바 모션속도
//type : 모션타입
var idx = 0;
m_nav('.gnb_wrap', {speed:150,type:'slide',bspeed:200, idx:idx});
});
주석 된 부분부터 focus , blur 이벤트 부분입니다.
Tab키로 포커스가 2번쨰 요소에 가자마자 스크립트가 종료되어서 여쭈어 봅니다 ㅠ
답변을 작성하시기 전에 로그인 해주세요.
