使用Aria-Expanded

Question

我有以下内容根据父级的aria-expanded 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后的伪元素来解决这个问题。