3

我想将HTML5hidden支持与 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>

我可能想使用该方法的完整功能，也许类似于

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

.toggle()扩展HTML5hidden属性的最高效解决方案是什么？这样做是多余的吗？

这个问题是为 jQuery .toggle() 方法添加 WAI-ARIA 支持的变体；已确定在切换aria-hidden状态的同时切换元素的显示是多余的。

4

2 回答 2

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() {...}), not .toggle(...)
  • 使用回调来切换hidden真的比普通的慢.toggle()
于 2013-01-31T22:04:31.873 回答
2

对此的一些评论可能有用也可能没有用 - 将其作为答案，因为它太长而无法放入评论:-) -

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

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

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

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

另一个需要注意的问题：HTML5 规范提到了hidden属性：

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

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

于 2013-02-05T04:14:34.287 回答