Question

我想将HTML5 hidden支持与jQuery的.toggle（）方法配对。

所以给定Hi there

$('#myElement').toggle()会隐藏元素，并设置hidden="hidden"：

Hi there

再次执行相同的$('#myElement').toggle()脚本会显示（切换）元素，并删除hidden="hidden"属性（它是一个布尔值）：

Hi there

我可能想要使用the method的完整功能，可能是

的内容

$('#myElement').toggle(
    if ($this.css('display')==='none'){
       $this.prop('hidden', 'hidden');
    }
    else
    {
       $this.removeProp('hidden');
    }
)

扩展.toggle()以切换HTML5 hidden属性的最佳效果解决方案是什么？这样做是多余的吗？

这个问题是Adding WAI-ARIA support to jQuery .toggle() method的变体;确定在切换元素显示的同时切换aria-hidden状态是多余的。

Answer 1

可以使用hidden方法的完整函数切换.toggle()属性：

$('#myElement').toggle(function() {
    if ($(this).css('display')==='none'){
       $(this).prop('hidden', 'hidden');
    }
    else
    {
       $(this).removeProp('hidden');
    }
})

有关工作示例，请参阅http://jsfiddle.net/jhfrench/g8Sqy/

注意：

使用$(this)，而不是$this
需要声明一个函数（.toggle(function() {...})，而不是.toggle(...）
使用回调切换hidden为really, really slower，而非普通.toggle()

Answer 2

对此的一些评论可能有用也可能没有用 - 把它作为一个答案，因为它太长而不适合评论:-) -

虽然hidden背后的想法是它有可能提供比display:none更好的可访问性（它不需要可访问性工具来了解CSS），但目前还没有具体的或可测试的我知道的好处 - 因为屏幕阅读器无论如何都支持CSS方法。

（...或者更确切地说，屏幕阅读器使用的浏览器已经解析了CSS并通过平台的辅助功能API将隐藏的信息传递给屏幕阅读器。可能从hidden受益的主要工具将是其他可访问性工具，它们直接使用自己的DOM副本，而不是与“主机”浏览器通信。）

（此外，在一个完美的世界中，CSS将纯粹是表现性的，通常不是。使用display:none是一种情况，它不是 - 它通常用于表示内容当前不相关，是语义信息;而hidden确实解决了这种情况;但还有其他案例需要解决：生成的内容可能是其他主要案例。）

我有点犹豫要采用新功能，直到我能验证它们的行为和按计划工作：新功能以某种方式指定并不是很常见，但最终会在一种略有不同的方式，它对如何实际使用该特征有影响。（使用ARIA role =“application”是具有plenty of caveats的功能的一个很好的例子。）并且在一天结束时，它不符合使页面可访问或不访问的规范，因为它是内容，浏览器和屏幕阅读器（或其他可访问性工具）的整个组合如何协同工作对最终用户。

需要注意的另一个问题是：the HTML5 spec says of the hidden attribute：

[...]例如，使用隐藏来隐藏选项卡式对话框中的面板是不正确的，因为选项卡式界面仅仅是一种溢出显示[...]

但是，选项卡式对话框是jQuery的toggle / show / hide / etc方法的常见用例;因此，在所有这些情况下应用hidden可能[技术上]违反规范。似乎同样的推理也适用于页面菜单栏及其弹出菜单。

为jQuery .toggle（）方法添加HTML5隐藏属性支持

2 个答案: