次のコードで、スライド パネル キーボードにアクセスできるようにするにはどうすればよいですか? パネルが開いている場合、リンクをタブで移動することがわかりますが、パネルは開きません。.hover を .click 、 .keypress などに変更し、それを 2 つのイベント (ホバーとクリックの両方) にバインドしようとしましたが、役に立ちませんでした。残念ながら、私のスクリプト作成の才能は最小限です。どんな助けでも大歓迎です！
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>