jQuery 根据其值更改 aria-expanded 属性

Question

我有一个项目要根据当前状态更改 aria-expanded 属性。

它将 OK 更改为 true，但由于某种原因在第二次单击时没有更改为 false：

html

 <li aria-expanded=false>hey</li>

jQuery

$("li").on("click", function(e) {
     var menuItem = $(e.currentTarget);

     if (menuItem.attr("aria-expanded") == true) {
          $(this).attr("aria-expanded", false);
     } else {
          $(this).attr("aria-expanded", true);
     }
     return false;
});

https://codepen.io/anon/pen/jLYRpg

Answer 1

HTML 属性是字符串，因此您应该使用 true 和 false.

的字符串版本

$(function () { 
    $('li').on('click', function (e) {
        var menuItem = $( e.currentTarget );

        if (menuItem.attr( 'aria-expanded') === 'true') {
            $(this).attr( 'aria-expanded', 'false');
        } else {
            $(this).attr( 'aria-expanded', 'true');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li aria-expanded="false">hey</li>

或者，您可以完全删除 if 语句

$(this).attr( 'aria-expanded', menuItem.attr('aria-expanded') === 'true' ? false : true);

或使用相反的方法

let expanded = menuItem.attr('aria-expanded') === 'true'
$(this).attr('aria-expanded', !!expanded)

jQuery 根据其值更改 aria-expanded 属性

jQuery change aria-expanded attribute depending on its value

jquery

attr

wai-aria