当aria-expanded=true时，如何为父元素添加类？代码调试求助

嘿，你的代码没生效的核心原因是**this的指向错误**！在你写的if代码块里，this并没有指向你选中的.navbar-collapse元素，而是指向了浏览器的全局window对象，所以$(this).parents("header")根本找不到目标的<header>元素，自然加不上red类啦。

下面给你几种修复方案，按需选用：

方案1：页面加载时一次性判断（静态场景） #

如果aria-expanded的值在页面加载后就不会变化，你可以先把目标元素存到变量里，或者直接用属性选择器简化代码：

修正后的JS代码 #

$(function () {
    // 方法1：先存元素再操作
    const collapseElement = $('.navbar-collapse');
    if (collapseElement.attr('aria-expanded') === "true") {
        collapseElement.parents("header").addClass('red');
    }

    // 方法2：更简洁的链式写法（推荐）
    $('.navbar-collapse[aria-expanded="true"]').parents("header").addClass('red');
});

方案2：动态监听属性变化（交互场景） #

如果aria-expanded是通过用户操作（比如点击导航按钮）动态切换的，那页面加载时的一次性判断就不够用了，需要监听变化事件：

如果你用的是Bootstrap导航栏 #

Bootstrap的折叠组件会触发shown.bs.collapse（展开时）和hidden.bs.collapse（收起时）事件，直接监听这些事件即可：

$(function () {
    const collapseElement = $('.navbar-collapse');
    // 页面加载时先初始化状态
    if (collapseElement.attr('aria-expanded') === "true") {
        collapseElement.parents("header").addClass('red');
    }

    // 监听展开/收起事件
    collapseElement.on('shown.bs.collapse', function() {
        $(this).parents("header").addClass('red');
    }).on('hidden.bs.collapse', function() {
        $(this).parents("header").removeClass('red');
    });
});

通用场景（非Bootstrap） #

用MutationObserver监听元素的属性变化，不管是什么方式修改aria-expanded都能捕获到：

$(function () {
    const collapseEl = document.querySelector('.navbar-collapse');
    const headerEl = collapseEl.closest('header');

    // 初始状态检查
    if (collapseEl.getAttribute('aria-expanded') === "true") {
        $(headerEl).addClass('red');
    }

    // 监听aria-expanded属性变化
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'aria-expanded') {
                const isExpanded = collapseEl.getAttribute('aria-expanded') === "true";
                $(headerEl).toggleClass('red', isExpanded);
            }
        });
    });

    observer.observe(collapseEl, { attributes: true });
});

你的CSS和HTML是没问题的 #

确认一下你的样式和结构：

.red {
    background: red;
}

<header class="navbar navbar-s" id="master" role="banner">
    <div class="container">
        <nav id="main-navbar" class="navbar-collapse" role="navigation" aria-expanded="true">
            Navigation
        </nav>
    </div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

只要JS代码正确，<header>元素在aria-expanded="true"时就会变成红色啦！

内容的提问来源于stack exchange，提问作者IfThis