使用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偽元素之后解決了此問題。