jQuery modifier l'attribut aria-expanded en fonction de sa valeur

Question

J'ai un élément que je veux modifier l'attribut aria-expanded en fonction de l'état actuel.

Il change OK pour vrai, mais pour une raison quelconque ne change pas faux sur le second clic:

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

Les attributs HTML sont des chaînes, vous devriez donc utiliser la version de chaîne de et 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>