使用jQuery切换元素的属性？

Question

使用jQuery构建一个树形菜单，并且我希望它是可访问的，所以我使用了aria属性。我想要做的是在单击/回车时将"aria-expanded“属性从true切换到false。我试过了，但显然是不正确的：

$(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' );

Answer 1

您可以使用.attr()手动编写切换逻辑

$(this).closest('ul').find('> li.tree-parent').attr('aria-expanded', function (i, attr) {
    return attr == 'true' ? 'false' : 'true'
});

Answer 2

此元素根据单击更改类。aria-提到的扩展值是在单击之后

$("#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');
  }

});