2011-04-21 3 views
0

나는 버튼을 클릭에로 아웃 슬라이드하는, JQuery와 슬라이드 아웃 사업부를않도록 TAB

내가이 broswer에서 열 및 TAB 키를 눌러 시작 # 문제점 , 선택이 해당 div (슬라이드)의 옵션에 도달하면 슬라이드 div가 나옵니다 (버튼을 클릭하지 않고도 볼 수 있음).

어떤 그 슬라이드 사업부는 TAB 선택을 피할 수있는 방법 .. display: none;에서 애니메이션 사업부의 디스플레이 오프 여기

CHECK http://global.redhatsalesteam.com/slide_test/

+1

우리가 코드를 볼 수 있을까요? 또한 화면에 표시되지 않는 요소를 숨겨서 포커스를 얻지 않도록 할 수도 있습니다. – DarthJDG

+0

여기에서 확인하십시오. http://global.redhatsalesteam.com/slide_test/ –

답변

0

이 -1로 당신의 연결에의 tabindex를 설정 슬라이드 애니메이션을 시작하기 전에 display: block로 변경. 그것들은 탭 순서에서 벗어나야합니다. 메뉴를 열 때 탭을 사용할 수있게하려면 전체 콜백에서 적절한 값으로 다시 설정할 수 있습니다. 이 같은

뭔가를 수행해야합니다

$('#slidemarginleft .button').click(function() { 
    $marginLefty.animate({ 
    marginLefty: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
    $marginLefty.outerWidth() : 0 
    }, 
    function(){ 
    var counter = 1; 
    if($marginLeft.is(':visible'){ 
     $marginLefty.find('a').each(function(){ 
      $(this).attr('tabindex', counter); 
      counter++; 
     }); 
    } 
    else{ 
      $marginLefty.find('a').attr('tabindex', '-1'); 
    } 
    }); 
}); 
1

시작입니다 -이 링크가 할 수있는 내부를 의미합니다 '는 t는 "탭 이동"에서 포커스를 취득 - 다음 클릭에 (함수에서) 단지

var $marginLefty = $('#slidemarginleft div.inner'); 
$marginLefty.css({ 
    marginLeft: $marginLefty.outerWidth() + 'px', 
    display: 'none' 
}); 

$('#slidemarginleft .button').click(function() { 
    $marginLefty.css('display', 'block').animate({ 
    marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
    $marginLefty.outerWidth() : 0 
    }); 
});