Question

我正在使用下面的脚本以FAQ格式显示/隐藏文本。对于辅助功能，这将不起作用。使用键盘导航的人将无法扩展文本，因为您单击以展开/隐藏的元素是标题，而不是链接，并且标题在标签页面时不会获得焦点。

当用户点击链接或链接获得键盘焦点时，如何更改此脚本以使其显示/隐藏？

非常感谢任何帮助。我一直在修补它，似乎无法得到它。

脚本：

<script type="text/javascript">
    if (document.images) {
        img1 = new Image();
        img1.src = "/images/expand-symbol.jpg";
        img2 = new Image();
        img2.src = "/images/collapse-symbol.jpg";
    }

    $(document).ready(function () {
        $('.section').hide();
        $('h3').click(function () {
        $(this).toggleClass("open");
        $(this).next().toggle();
        }); //end toggle
    }); //end ready
</script>

HTML：

<h3 class="question">Question that is always shown</h3>
    <div class="section">
        <p>Text that appears when you click the question</p>
    </div>

Answer 1

如果我完全理解您的要求，您可以向tabindex添加H3 ...

<h3 tabindex="0" class="question">Question that is always shown</h3>

...这将允许您使用Tab键选择它，然后您可以添加.focus()事件来打开答案，当您选中它时，您甚至可以添加.blur()事我也想结束答案。

$('h3').focus(function () {
        $(this).toggleClass("open");
        $(this).next().toggle();
    });

这是我用来测试我的答案的小提琴的链接：http://jsfiddle.net/r4PqJ/

这是一个小提琴，当你选择开启/关闭http://jsfiddle.net/wf_4/r4PqJ/2/

时，它会打开和关闭

这是一个处理mousedown（点击），focus和blur

的附加脚本

   $(document).ready(function () {
    $('.section').hide();
    var hasFocus = false;
    $('h3').on('mousedown : focus : blur', function(e){

        if (e.type == 'focus' ) {
            hasFocus = true;
            $(this).addClass("open");
            $(this).next().show(); 
           // console.log('focus event fired '+ hasFocus);
        }
        else if(e.type == 'mousedown' && hasFocus != true){
            $(this).toggleClass("open");
            $(this).next().toggle();
            hasFocus = false;
          //  console.log('mousedown event fired '+ hasFocus);
        }
        else if(e.type == 'blur' && hasFocus != true){
            $(this).removeClass("open");
            $(this).next().hide();
          //  console.log('blur event fired '+ hasFocus);
        }
        hasFocus = false;           
    });     
}); //end ready

和另一个小提琴http://jsfiddle.net/wf_4/r4PqJ/5/

更改此隐藏/扩展脚本以获取辅助功能

1 个答案: