📅 最后修改于: 2023-12-03 14:52:21.753000 🧑 作者: Mango
在本文中，我们将学习如何使用 jQuery 的 toggle() 函数来通过设置 aria-hidden 属性来显示和隐藏元素。
aria-hidden 属性是一种用于辅助技术的 HTML 属性，用于指示某个元素是否应该被屏幕阅读器之类的辅助技术忽略。如果设置为 true，则该元素将被屏幕阅读器忽略。此属性对于减少辅助技术用户的无用信息是至关重要的。
为了显示或隐藏元素，我们可以使用 jQuery 的内置函数 toggle()。该函数用于切换匹配元素的可见性。如果元素是隐藏的，它将被显示，如果元素是显示的，则它将隐藏。
$(selector).toggle();
通过设置 aria-hidden 属性为 true，我们可以将元素隐藏起来，从而让其对于辅助技术用户不可见。
下面是一个例子，我们将使用 toggle() 函数来显示或隐藏元素，并设置 aria-hidden 属性来指示元素是否应该被屏幕阅读器忽略。
<!DOCTYPE html>
<html>
<head>
<title>jQuery aria-hidden 属性示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="toggle-btn" aria-expanded="false" aria-controls="content">显示/隐藏内容</button>
<div id="content" aria-hidden="true">
<p>这是要显示/隐藏的内容。</p>
</div>
<script>
$(document).ready(function(){
$("#toggle-btn").click(function() {
$("#content").toggle();
var expanded = $(this).attr('aria-expanded') == 'true';
$(this).attr('aria-expanded', !expanded);
var hidden = $("#content").attr('aria-hidden') == 'true';
$("#content").attr('aria-hidden', !hidden);
});
});
</script>
</body>
</html>
在上面的示例中，我们使用 jQuery toggle() 函数来显示或隐藏带有 ID content 的 div 元素。我们还使用 attr() 函数来更改按钮的 aria-expanded 属性和 div 元素的 aria-hidden 属性，以反映元素的可见性状态。
在本文中，我们了解了如何使用 jQuery toggle() 函数来显示或隐藏元素，并通过设置 aria-hidden 属性来指示元素是否应该被屏幕阅读器之类的辅助技术忽略。我们还学习了如何使用 attr() 函数来更改属性的值以反映元素的可见性状态。