使用 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 解决了这个问题。