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