2013-01-31 58 views
3

我想用jQuery的.toggle()方法配對HTML5 hidden支持。向jQuery .toggle()方法添加HTML5隱藏屬性支持

因此,考慮<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狀態以及切換元素的顯示是多餘的。

+0

我只是簡單地做我自己的擴展方法/ jquery插件來做伎倆,並命名它適當的。 – ericosg

+0

@ericosg:好吧,似乎'.toggle()'方法支持對目標元素的這種類型的操作,所以如果它以某種方式提供了速度增益,我只會將其作爲插件來執行。 –

+0

目前[幾乎]同時切換隱藏和顯示:無。你想做什麼的動機是什麼 - 你認爲它會解決或改進什麼? – BrendanMcK

回答

2

一些這方面的評論,可能會或可能不會有用的 - 把這個作爲一個答案,因爲它太很長時間以適應一個評論:-) -

儘管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可能[在技術上]違反規範。似乎相同的推理也適用於頁面菜單欄及其彈出菜單。

+0

感謝您花時間思考這個。我開始採用這種切線思維,我將使用有用的功能,但即使在變得清楚沒有實用工具的情況下,我仍然想看看它是否可以(使用'.toggle()'切換其他邏輯)。 –

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
  • 需要申報
  • 使用回調來切換hidden功能(.toggle(function() {...}),不.toggle(...
  • really, really slower比普通老式.toggle()
+0

常見的錯誤,很明顯,但眼睛看不見'使用$(this),而不是$ this' – ericosg