键盘操作滑动屏幕

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()玩。