키보드 액세스 가능한 슬라이드 패널

Question

다음 코드에서 슬라이드 패널 키보드에 액세스하려면 어떻게해야합니까? 패널이 열려 있으면 링크를 통해 탭이 표시되지만 패널은 열리지 않습니다. .hover를 .click, .keypress 등으로 바꾸고 심지어 두 개의 이벤트 (두 번 가져 가거나 클릭)를 사용하지 않으려 고 시도했습니다. 저의 스크립팅 재능은 불행히도 최소한입니다. 어떤 도움을 주시면 감사하겠습니다!

CSS :

/* slide panel */ 

#sidePanel {width:550px; position:fixed; left:-485px; top:30%;} 

    #panelHandle {background-color:#176233; border:solid 1px #fbfbfb; background-image:-webkit-linear-gradient(bottom, #297847, #176233); 
     background-image:-moz-linear-gradient(bottom, #297847, #176233); background-image:-o-linear-gradient(bottom, #297847, #176233); 
     background-image:-ms-linear-gradient(bottom, #297847, #176233); background-image:linear-gradient(to top, #297847, #176233); height:150px; width:50px; 
     border-radius:0 5px 5px 0; float:left; cursor:pointer;} 

     #panelHandle p {-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); color:#fff; font-size:24px; font-weight:bold; left:-50px; margin:0; padding:0; 
      position:relative; top:55%; width:150px;} 

    #panelContent{float:left; border:1px solid #333333; width:480px; height:400px; background-color:#fff;} 

스크립트 : HTML

jQuery(function($) { 
    $(document).ready(function() { 
     $('#panelHandle').hover (function() { 
      $('#sidePanel').stop(true, false).animate({ 
       'left': '0px' 
      }, 900); 
     }, function() { 
      jQuery.noConflict(); 
     }); 

     jQuery('#sidePanel').hover (function() { 
      // Do nothing 
     }, function() { 

      jQuery.noConflict(); 
      jQuery('#sidePanel').animate({ 

       left: '-485px' 
      }, 800); 

     }); 
    }); 
}); 

:

<div id="sidePanel"> 
      <div id="panelContent"> 

       <div class="col1 left20" id="taskPane"> 
        <br class="clear" /> 

        <table title="My Tasks" class="rounded-corners bottom40 cal"> 
         <thead> 
          <tr> 
           <th id="reqNum1" title="Request Number" class="left40">Request #</th> 
           <th id="taskid1" title="Task">Task</th> 
           <th id="dueDat1" title="Due Date">Due</th> 
          </tr> 
         </thead> 

         <tbody>    
          <tr> 
           <td headers="reqNum1" class="left40"><a href="#" accesskey="c">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 

          <tr> 
           <td headers="reqNum1" class="left40"><a href="#">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 

          <tr> 
           <td headers="reqNum1" class="left40"><a href="#">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 

          <tr> 
           <td headers="reqNum1" class="left40"><a href="#">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 

          <tr> 
           <td headers="reqNum1" class="left40"><a href="#">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 

          <tr> 
           <td headers="reqNum1" class="left40"><a href="#">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 

          <tr> 
           <td headers="reqNum1" class="left40"><a href="#">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 

          <tr> 
           <td headers="reqNum1" class="left40"><a href="#">12345678</a></td> 
           <td headers="taskid1">Task Name</td> 
           <td headers="taskCat">09/03/12</td> 
          </tr> 
         </tbody> 
        </table> 
       <br class="clear" /> 


        <div class="col6 small centerText top60"> 
         <a href="#"><span class="icon-previous-2 iconsMedL" title="First Record"></span></a> 
         <a href="#"><span class="icon-previous left60 iconsMedL" title="Page Back"></span></a></div> 
        <div class="centerText pagination"> 
             <a href="#" class="endPipesm">1 </a> 
             <a href="#" class="endPipesm">2 </a> 
             <a href="#" class="endPipesm">3 </a> 
             <a href="#" class="endPipesm">4 </a> 
             <a href="#">5 </a> 
            </div> 
        <div class="col6 small centerText"> 
         <a href="#"><span class="icon-next-2 iconsMedR rightText" title="Last Record"></span></a> 
         <a href="#"><span class="icon-next iconsMedR right60 rightText" title="Next Page"></span></a></div> 

       </div><!-- end tasks and pending requests --> 

      </div> 

      <div id="panelHandle"><p>My Tasks</p></div> 
     </div> 

Answer 1

당신이 몇 가지 코드를 떠나나요? 내가 뭔가를 놓치지 않는다면, 나는 당신이 녹색 Tasks 버튼/물건을 만드는 곳을 보지 못한다. 내가보기에 초점이 맞지 않으므로 집중할 필요가 있습니다.

일단 그렇게하면 버튼에 포커스가있을 때 taskPane ID에 이벤트 리스너를 추가해야합니다. taskPane이 표시됩니다. 어떻게 든 잠그지 않으면 탭을 다시 열어 요청 #을 열면 focus(), focusin() 및 focusout()으로 재생해야합니다.