当我移动到下一个元素时，如何使 \'aria-expanded\' 值恢复为 \'false\'？

Question

我的菜单中有 2 个下拉按钮，我为其添加了 'aria-expanded'=false 默认值。当按钮展开或关闭时，还有添加到按钮的“向上”和“向下”类。当我单击第一个按钮将其展开时，“aria-expanded”值变为“true”并添加了“up”类。然后我点击第二个按钮，第二个按钮的 'aria-expanded' 值变为 'true' 并添加 class='up' 。但是这里开始了问题。即使当我单击第二个按钮时第一个按钮下拉菜单关闭，并且添加了“down”类，第一个按钮的“aria-expanded”值仍然为“true”。它不会变回“假”。 [按钮][1]

这是 jQuery 代码：

function initMenuDrowpDownHandlers() {
        $('.cfs_dropdown').parent().children('button').off('click.cfs_dropdown');
        $('.cfs_dropdown').parent().children('button').on('click.cfs_dropdown', function(e) {
            var lnk = $(this);
            console.log(lnk);
            if (lnk.hasClass('up')) {
                lnk.removeClass('up').addClass('down');
                lnk.attr("aria-expanded","false");
            } else {
                $('.cfs_dropdown').parent().children('button').removeClass('up').addClass('down');
                lnk.removeClass('down').addClass('up');
                lnk.attr("aria-expanded","true");
                $(document).on('click.cfs_drop', function (e) {
                    if ($(e.target).hasClass('disabled') || ($(e.target).parents('.cfs_dropdown')[0] && !$(e.target).is('button'))) return;
                    lnk.removeClass('up').addClass('down');
                    lnk.attr("aria-expanded","false");
                    $(document).off('click.cfs_drop');
                });
            }
            return false;
        });
    }

我将不胜感激任何建议。谢谢你。

Answer 1

尝试使用blur event

yoursButton.addEventListener('blur', () => {
  yoursButton.setAttribute("aria-expanded", "false");
});