Добавление поддержки скрытых атрибутов HTML5 в метод jQuery .toggle()

Question

Я хотел бы соединить HTML5 hidden поддержка метода.toggle() в jQuery.

Так дано <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() также переключать HTML5 hidden атрибут? Это избыточно для этого?

Этот вопрос представляет собой вариант добавления поддержки WAI-ARIA в метод jQuery .toggle(); было установлено, что переключение aria-hidden состояние в сочетании с переключением отображения элемента.

Answer 1

Некоторые комментарии по этому поводу, которые могут или не могут быть полезны - если поставить это в качестве ответа, так как это слишком долго, чтобы вписаться в комментарий:-) -

Хотя идея позади hidden является то, что он имеет потенциал для обеспечения лучшей доступности, чем display:none (он не требует инструмента доступности, чтобы знать CSS), в настоящее время я не знаю конкретного или проверяемого преимущества - учитывая, что программы для чтения с экрана все равно поддерживают подход CSS.

(... или, скорее, браузеры, с которыми работают программы чтения с экрана, уже анализируют CSS и передают скрытую информацию на программы чтения с экрана через API доступности платформы. Вероятно, это основные инструменты, которые можно извлечь из hidden будут другими инструментами специальных возможностей, которые будут напрямую работать с собственной копией DOM, а не с браузером хоста.)

(Кроме того, хотя в идеальном мире CSS был бы чисто презентационным, часто это не так. display:none это один случай, когда это не так - его часто используют для указания того, что контент в настоящее время не актуален, то есть является семантической информацией; и hidden относится к этому делу; но есть еще другие случаи, которые также должны быть рассмотрены: сгенерированный контент, возможно, является основным другим случаем.)

Я не решаюсь принять новые функции, пока не смогу проверить их поведение и работу в соответствии с планом: нередки случаи, когда новые функции задаются одним способом, но в итоге они реализуются слегка другим образом, что влияет на то, как функция может быть практически использована. (Использование ARIA role="application" является хорошим примером функции, которая имеет множество предостережений.) И в конце концов, не соблюдение спецификации делает страницу доступной или нет, так как это вся комбинация контента, браузера и программы чтения с экрана (или другого инструмента доступности) работает вместе, что важно для конечного пользователя.

Еще одна проблема, о которой следует знать: спецификация HTML5 говорит о hidden атрибут:

[...] Например, неправильно скрывать скрытые панели в диалоговом окне с вкладками, потому что интерфейс с вкладками - просто некое представление о переполнении [...]

Тем не менее, диалоговые окна с вкладками являются распространенным вариантом использования для jQuery toggle / show / hide / etc методы; так применяя hidden во всех этих случаях может быть [технически] против спецификации. Похоже, те же рассуждения применимы и к страницам меню, и к их всплывающим меню.

Answer 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()