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属性もトグルするように拡張するための最もパフォーマンスの高いソリューションは何ですか? そうするのは冗長ですか？

この質問は、Adding WAI-ARIA support to jQuery .toggle() methodのバリエーションです。aria-hidden要素の表示の切り替えと組み合わせて状態を切り替えるのは冗長であると判断されました。

4

2 に答える 2

2

役に立つかもしれないし、役に立たないかもしれないこれについてのいくつかの解説-コメントに収まるには長すぎるので、これを答えとして入れてください:-)-

背後にある考え方は、 （CSSを認識するためのアクセシビリティツールを必要としない）hiddenよりも優れたアクセシビリティを提供する可能性があるということですが、スクリーンリーダーがCSSアプローチをサポートしていることを考えると、現在、私が知っている具体的またはテスト可能な利点はありません。display:noneとりあえず。

（...というか、スクリーンリーダーが動作するブラウザはすでにCSSを解析し、プラットフォームのアクセシビリティAPIを介して非表示の情報をスクリーンリーダーに渡します。恩恵を受ける主なツールhiddenは、独自のアクセシビリティツールと直接連携する他のアクセシビリティツールでしょう。 「ホスト」ブラウザと通信するのではなく、DOMのコピー。）

（また、完璧な世界では、CSSは純粋に表現的ですが、そうではないことがよくあります。使用は、display:noneそうでない場合の1つのケースです。これは、コンテンツが現在関連していないことを示すためによく使用されます。これは、セマンティック情報です。hiddenこの場合ですが、対処しなければならない他の場合もあります。生成されたコンテンツがおそらく他の主な場合です。）

新しい機能が計画どおりに動作し、機能していることを確認できるまで、新しい機能を採用することを少し躊躇します。新しい機能が一方向に指定されることは珍しくありませんが、微妙に異なる方法で実装されることになり、その方法に影響があります。機能は実際に使用することができます。（ARIA role = "application"の使用は、多くの警告がある機能の良い例です。）そして、結局のところ、ページをアクセス可能にするかどうかを決定する仕様に準拠していません。コンテンツ、ブラウザ、スクリーンリーダー（またはその他のアクセシビリティツール）のすべての組み合わせが連携して機能し、エンドユーザーにとって重要です。

注意すべきもう1つの問題：HTML5仕様はhidden属性について述べています：

[...]たとえば、タブ付きのインターフェイスは単なるオーバーフロープレゼンテーションの一種であるため、タブ付きのダイアログでパネルを非表示にするためにhiddenを使用するのは正しくありません[...]

ただし、タブ付きダイアログは、jQueryのtoggle/ show// hideetcメソッドの一般的なユースケースです。hiddenしたがって、これらすべての場合に適用することは、[技術的に]仕様に反する可能性があります。同じ理由がページメニューバーとそのポップアップメニューにも当てはまるようです。

于 2013-02-05T04:14:34.287 に答える
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は、単純な古いものよりも本当に、本当に遅いです.toggle()
于 2013-01-31T22:04:31.873 に答える