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

我想用jQuery的.toggle（）方法配对HTML5 hidden支持。向jQuery .toggle（）方法添加HTML5隐藏属性支持

因此，考虑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状态以及切换元素的显示是多余的。

来源

2013-01-31 Jeromy French

我只是简单地做我自己的扩展方法/ jquery插件来做伎俩，并命名它适当的。 – ericosg

@ericosg：好吧，似乎'.toggle（）'方法支持对目标元素的这种类型的操作，所以如果它以某种方式提供了速度增益，我只会将其作为插件来执行。 –

目前[几乎]同时切换隐藏和显示：无。你想做什么的动机是什么 - 你认为它会解决或改进什么？ – BrendanMcK

一些这方面的评论，可能会或可能不会有用的 - 把这个作为一个答案，因为它太很长时间以适应一个评论:-) -

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

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

（另外，在一个完美的世界中，CSS将纯属表现形式，但通常不是。使用display:none是一种情况，它不是 - 它通常用于指示内容当前不相关，这是语义信息;并且hidden确实解决了这种情况;但还是有那也必须加以解决其他情况：生成的内容也许是主其他情况）

我有点犹豫地采用新的功能，直到我可以验证它们表现和工作按计划：这不是不同寻常的新功能可以用单向的方式来指定，但最终会以一种完全不同的方式来实现，这对于实际上如何使用该功能具有影响。（使用ARIA角色=“应用程序”是plenty of caveats功能的一个很好的例子。）在一天结束时，它不遵守规范，使页面可访问或不可访问，因为它是整体内容，浏览器和屏幕阅读器（或其他可访问性工具）的组合对最终用户来说很重要。

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

[...]例如，它是不正确的使用隐藏的隐藏面板在标签对话框，因为标签式界面仅仅是一种溢出演示[...]

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

来源

2013-02-05 04:14:34 BrendanMcK

感谢您花时间思考这个。我开始采用这种切线思维，我将使用有用的功能，但即使在变得清楚没有实用工具的情况下，我仍然想看看它是否可以（使用'.toggle（）'切换其他逻辑）。 –

的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
使用回调来切换hidden功能（.toggle(function() {...})，不.toggle(...）
是really, really slower比普通老式.toggle()

来源

2013-01-31 22:04:31

常见的错误，很明显，但眼睛看不见'使用$（this），而不是$ this' – ericosg

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

回答

相关问题