为jQuery .toggle（）方法添加HTML5隐藏属性支持 [英] Adding HTML5 hidden attribute support to jQuery .toggle() method

问题描述

我想配对使用jQuery的.toggle（）方法支持HTML5 隐藏 。

所以给定< p id =myElement>您好< / p>

$（'＃ myElement'）。toggle（）会隐藏元素，并设置 hidden =hidden：

$('#myElement').toggle() would hide the element, and set hidden="hidden":

< p id =myElementstyle =display：none; hidden =hidden>你好< / p>

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

And executing the same $('#myElement').toggle() script again would show (toggle) the element, and remove the hidden="hidden" property (it is a boolean):

< p id =myElementstyle =display：inline> Hi there< / p>

我可能想要使用方法，可能类似于

I probably want to use the complete function of the method, maybe something along the lines of

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

扩展 .toggle（）的最佳性能解决方案也是为了切换HTML5 隐藏属性？这样做是多余的吗？

What's the most performant solution for extending .toggle() to also toggle the HTML5 hidden attribute? Is it redundant to do so?

此问题是为jQuery .toggle（）方法添加WAI-ARIA支持;确定在切换元素的显示时切换 aria-hidden 状态是多余的。

This question is a variation of Adding WAI-ARIA support to jQuery .toggle() method; it was determined that it would be redundant to toggle the aria-hidden state in conjunction with toggling the element's display.

推荐答案

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

Some commentary on this that may or may not be useful - putting this as an answer as it's too long to fit into a comment :-) -

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

While the idea behind hidden is that it has potential to provide better accessibility than display:none (it doesn't require an accessibility tool to be aware of the CSS), there's currently no concrete or testable benefit that I know of - given that screenreaders support the CSS approach anyway.

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

(...or rather, the browsers that screenreaders work with already parse the CSS and pass the hidden information on to the screenreaders via the platform's accessibility API. Likely the main tools to benefit from hidden will be other accessibility tools that work directly with their own copy of the DOM rather than communicating with a 'host' browser.)

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

(Also, while in a perfect world, CSS would be purely presentational, it's often not. Use of display:none is one case where it's not - it is often used to indicate that content is not currently relevant, which is semantic information; and the hidden does address this case; but there's still other cases that have to also be addressed: generated content is perhaps the main other case.)

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

I'm somewhat hesitant to adopt new features until I can verify them behaving and working as planned: it's not uncommon for new features to be spec'd one way, but end up being implemented in a subtly different way that has implications for how the feature can practically be used. (Use of the ARIA role="application" is a good example of a feature that has plenty of caveats.) And at the end of the day, it's not adherence to the spec that makes a page accessible or not, as it is how the whole combination of content, browser and screenreader (or other accessibility tool) work together that matters to the end-user.

另一个问题是意识到： HTML5规范说明了隐藏属性：

Another issue to be aware of: the HTML5 spec says of the hidden attribute:

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

[...] For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation [...]

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

However, tabbed dialogs are a common use-case for jQuery's toggle/show/hide/etc methods; so applying hidden in all those cases might be [technically] against the spec. Seems the same reasoning would apply to page menubars and their popup menus also.

这篇关于为jQuery .toggle（）方法添加HTML5隐藏属性支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！