Javascript将aria扩展设置为false <li> 如果其他 <li> 设置为aria-expanded = true

Question

This is my javascript code:

<script type="text/javascript">
   $(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>

I want my other li to set to aria-expanded=false if i click an li

Answer 1

You can use jQuery's siblings() function to get the other li elements:

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

Answer 2

You can set it first to false for all <li> elements and then enable it for the one you clicked on:

<script type="text/javascript">
   $(function () {
       $('li').on('click', function (e) {
           var menuItem = $(e.currentTarget);
           // set it to false for every element
           menuItem.parent().children('li').attr('aria-expanded', 'false');
           // set it to true for the element you clicked on
           menuItem.attr('aria-expanded', 'true');
       });
   });
</script>