鍵盤操作滑動屏幕

Question

在下面的代碼，我怎樣才能讓我的滑蓋面板鍵盤操作？如果面板打開，我可以看到它通過鏈接選項卡，但它不打開面板。我試圖改變.hover到。點擊，.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;} 

腳本：

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); 

     }); 
    }); 
}); 

HTML：

<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

你忽略了一些代碼？除非我錯過了一些東西，否則我沒有看到你在哪裏製作綠色任務按鈕/東西。從我看到的沒有得到任何重點，所以你需要允許有重點。

一旦你這樣做，你需要把一個事件偵聽器的taskPane ID時，焦點轉移到該按鈕，taskPane所示。你必須把它鎖定在某種程度上所以，當你再次打標籤，打開了一個請求＃，你將需要focus()，focusin()和focusout()玩。