为 jQuery .toggle() 方法添加 HTML5 隐藏属性支持

Question

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

所以给定<p id="myElement">Hi there</p>

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

<p id="myElement" style="display: none;" hidden="hidden">Hi there</p>

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

<p id="myElement" style="display: inline">Hi there</p>

我可能想使用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 背后的想法是它有可能提供比 display:none 更好的可访问性（它不需要可访问性工具来了解 CSS），但我知道目前没有具体或可测试的好处of - 鉴于屏幕阅读器无论如何都支持 CSS 方法。

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

（另外，虽然在一个完美的世界中，CSS 将纯粹是展示性的，但通常不是。使用display:none 是一种不适用的情况 - 它通常用于指示内容当前不相关，即 语义信息；hidden 确实解决了这种情况；但还有其他情况也必须解决：生成的内容可能是主要的其他情况。）

在我能够验证它们的行为和按计划工作之前，我有点犹豫是否采用新功能：以一种方式指定新功能但最终在一种微妙的不同方式，对如何实际使用该功能有影响。 （使用 ARIA 角色 =“应用程序”是具有 plenty of caveats 的功能的一个很好的例子。）归根结底，它不遵守使页面可访问或不可访问的规范，因为它是如何内容、浏览器和屏幕阅读器（或其他辅助工具）的整体组合对最终用户很重要。

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

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

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

Answer 2

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