使用Aria扩展的切换类

Question

我有以下根据父级的aria扩展的attr值切换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标记可切换状态，但是此代码无法按预期工作。 有任何想法吗？

Answer 1

切换typcn-arrow-sorted-up是不够的，因为您可能还需要在这个类中切换typcn-arrow-sorted-down 。 这是一个工作示例，显示了根据aria属性在两个分类之间进行切换。 我还添加了一个按钮来更改属性值，以检查是否可行。

 $(function () { $('#ariaToggler').click(function(){ var currValue = $('.is-accordion-submenu-parent').attr('aria-expanded'); if(currValue == 'true'){ currValue = 'false'; }else{ currValue = 'true'; } $('.is-accordion-submenu-parent').attr('aria-expanded', currValue); checkup(); }) function checkup(){ $(".typcn").removeClass('typcn-arrow-sorted-up typcn-arrow-sorted-down'); if ($('.is-accordion-submenu-parent').attr('aria-expanded') === "true") { $(".typcn").addClass("typcn-arrow-sorted-up"); }else{ $('.typcn').addClass('typcn-arrow-sorted-down'); } } checkup(); }) 

 .typcn{ display:block; height:50px; width:100px; } .typcn-arrow-sorted-down{ background-color:red; } .typcn-arrow-sorted-up{ background-color:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="ariaToggler">toggle Attr</button> <li class="is-accordion-submenu-parent" aria-expanded="false"> <a>Label</a> <span class="typcn typcn-arrow-sorted-down"></span> </li> 

$(".typcn").removeClass('typcn-arrow-sorted-up typcn-arrow-sorted-down');
if ($('.is-accordion-submenu-parent').attr('aria-expanded') === "true") {
  $(".typcn").addClass("typcn-arrow-sorted-up");
}else{
  $('.typcn').addClass('typcn-arrow-sorted-down');
}

编辑

添加了另一个示例，该示例使用toggleClass并使用相对于所单击标签的选择器，因此即使多个示例也可以使用。

$(function () {
  $('.is-accordion-submenu-parent a').click(function(){
    var currValue = $(this).parent().attr('aria-expanded');
    if(currValue == 'true'){
      currValue = 'false';
    }else{
      currValue = 'true';
    }
    $(this).parent().attr('aria-expanded', currValue);
    $(this).next().toggleClass('typcn-arrow-sorted-down');
    $(this).next().toggleClass('typcn-arrow-sorted-up');

  })

 $(function () { $('.is-accordion-submenu-parent a').click(function(){ var currValue = $(this).parent().attr('aria-expanded'); if(currValue == 'true'){ currValue = 'false'; }else{ currValue = 'true'; } $(this).parent().attr('aria-expanded', currValue); $(this).next().toggleClass('typcn-arrow-sorted-down'); $(this).next().toggleClass('typcn-arrow-sorted-up'); }) }) 

 .typcn{ display:inline-block; height:15px; width:30px; } .typcn-arrow-sorted-down{ background-color:red; } .typcn-arrow-sorted-up{ background-color:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="is-accordion-submenu-parent" aria-expanded="false"> <a>Label 1</a> <span class="typcn typcn-arrow-sorted-down"></span> </li> <li class="is-accordion-submenu-parent" aria-expanded="false"> <a>Label 2</a> <span class="typcn typcn-arrow-sorted-down"></span> </li> <li class="is-accordion-submenu-parent" aria-expanded="false"> <a>Label 3</a> <span class="typcn typcn-arrow-sorted-down"></span> </li> 

Answer 2

通过以* -expanded属性为目标并在CSS伪元素之后解决了此问题。