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

脚本：

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

键盘可访问滑动面板

1 个答案: