使用jQuery构建树形菜单,并希望它具有可访问性,因此我正在使用aria属性。我想要做的是在单击/输入时将"aria-expanded"属性从true切换到false。我尝试了这个方法,但显然不正确:
$(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' );
使用jQuery构建树形菜单,并希望它具有可访问性,因此我正在使用aria属性。我想要做的是在单击/输入时将"aria-expanded"属性从true切换到false。我尝试了这个方法,但显然不正确:
$(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' );
您可以使用 .attr() 来手动编写切换逻辑
$(this).closest('ul').find('> li.tree-parent').attr('aria-expanded', function (i, attr) {
return attr == 'true' ? 'false' : 'true'
});
该元素会根据点击更改类。aria-expanded 属性值是指点击后的状态。
$("#navbar-btn-icon").click(function(e) {
var menuItem = $(this);
if (menuItem.attr("aria-expanded") === "true") {
$("span.navbar-toggler-icon").addClass('clicked');
}
else if (menuItem.attr("aria-expanded") === "false") {
$("span.navbar-toggler-icon").removeClass('clicked');
}
});