Javascript 使用扩展的Aria切换类

我有以下方法可以基于父元素的aria扩展属性值切换span元素的类：

$(function () {
    if ($('.is-accordion-submenu-parent').attr('aria-expanded') === "true") {
        $(this).find(".typcn-arrow-sorted-down").toggleClass("typcn-arrow-sorted-up");
    }
})

结构如下：

<li class="is-accordion-submenu-parent" aria-expanded="false">
  <a>Label</a>
  <span class="typcn typcn-arrow-sorted-down"></span>
</li>

标签

编辑

  <li class="is-accordion-submenu-parent" aria-expanded="false">
    <a>Label<span class="typcn typcn-arrow-sorted-down"></span></a>
    <ul class=“nested”>
      <li class=“menu item”>…</li>
      …etc…
    </ul>
  </li>

标签


……等等…

---

单击A标记可切换状态，但此代码无法按预期工作。有什么想法吗

切换向上排序的

typcn箭头将不够，因为您可能还需要切换向下排序的
typcn箭头。
下面是一个工作示例，它显示了基于aria属性在两个类之间切换。我还添加了一个按钮来更改属性值，以检查其是否有效


$（函数（）{
$（'#ariaToggler'）。单击（函数（）{
var currValue=$（'.is accordion submenu parent'）.attr（'aria-expanded'）；
如果（currValue=='true'）{
currValue='false'；
}否则{
currValue='true'；
}
$（'.is accordion submenu parent'）.attr（'aria-expanded'，currValue）；
检查（）；
})
函数检查（）{
$（“.typcn”）.removeClass（'typcn-arrow-sorted-up-typcn-arrow-sorted-down'）；
if（$（'.is accordion子菜单父项'）.attr（'aria-expanded'）==“true”）{
$（“.typcn”）.addClass（“已排序的typcn箭头”）；
}否则{
$（'.typcn'）.addClass（'typcn-arrow-sorted-down'）；
}
}
检查（）；
})
.typcn{
显示：块；
高度：50px；
宽度：100px；
}
.typcn箭头已排序{
背景色：红色；
}
A.整理好了吗{
背景颜色：绿色；
}

切换属性

标签
通过使用CSS以*扩展属性和after伪元素为目标解决了这一问题。
这是有道理的，但尽管您的测试成功，但这并没有达到预期的效果。已添加向下箭头类，但未在aria expanded=true状态下切换。@WesleyPicotte我又添加了一个示例，我相信这是您的要求。万一你觉得这不是你需要的。请考虑详细解释一下，谢谢您的更新。我已经编辑了这个代码段的目标HTML，以便更好地演示完整的结构。修改后的代码段将两个typcn类都添加到ul.nested中。@WesleyPicotte您可以添加文本来解释应该做什么吗。现在，单击我认为是锚定标记的标记，您需要切换
aria expanded
和span中的类，该类正在编辑中工作。嵌套的
ul
不会向问题语句添加任何内容。正确-单击a元素可切换菜单。菜单的插件以ul.nested为目标，它显然包含手风琴的内容。在我看来，您的代码片段是正确的，但出于任何原因，它会遍历到ul，我看到这两个类都是在ul中添加的。我不确定我能提供什么额外的信息。