Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML

<details>
<summary>W Group Site Navigation</summary>
<a href=#>Aeronautics</a>
<a href=#>Pharma</a>
<a href=#>Railways</a>
<a href=#>Shipping</a>
</details>

Добавляем стили
Применяем стили к элементам summary и details. Для более общего представления для разных браузером начнём с следующих стилей:

summary, details { display: block; }
details { visibility: hidden; }
details > summary { visibility:  visible; }
summary.no-det:before { content: "?"; padding-right: 5px; font-size: 1.2em; }
details[open] summary.no-det:before { content:"?"; }
details[open] { visibility: visible; }

Добавляем стили при доступности элементов
Следующий код написан на jQuery и обычно распологается у закрывающего тега body. Для начала, мы проверяем доступность атрибута open элемента details. Если тест провалится, то к элементу будет прикреплён класс no-det. При клике по элементу summery, будет добавляться атрибут open:

<script>
function supports_details() {
    if (!('open' in document.createElement('details'))) {
return "no-details"; }
}
 
if (supports_details() == "no-details" ) {
    $("details").addClass("no-det");
}
$('details.no-det summary').click(function() {
$details = $(this).parent();
    if ($details.attr('open')) {
    $details.removeAttr('open');
    } else {
    $details.attr('open', 'open');
    }
});
</script>

Добавлено: 23 Апреля 2018 16:54:17 Добавил: Андрей Ковальчук Нравится 0

Добавить