如果子 aria-expanded=true 添加类到父元素答案

【问题标题】：If child aria-expanded=true add class to parent element如果子 aria-expanded=true 添加类到父元素
【发布时间】：2018-01-19 17:37:56
【问题描述】：

如果aria-expanded=true，我如何向父元素添加类？

我有以下标记：

$(function () {
      if ($('.navbar-collapse').attr('aria-expanded') === "true") {
        $(this).parents("header").addClass('red');
    }
});

.red { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

我认为 if-query 有效，但其他代码无效。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您遇到的问题是if 条件中的this 将引用window，而不是您选择的.navbar-collapse 元素。

要解决这个问题，您可以使用“属性选择器”来检索元素，然后链接所需的方法调用以将类添加到父目标试试这个：

$(function() {
  $('.navbar-collapse[aria-expanded="true"]').closest('header').addClass('red');
});

.red { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案2】：

if 块中的this 不指代nav 元素，因此您没有工作。

您可以使用Attribute Equals Selector [name=”value”] 定位元素然后向上遍历。

$(function() {
  $('.navbar-collapse[aria-expanded="true"]').parents("header").addClass('red');
});

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

【讨论】：