Question

如果aria-expanded=true？

，如何将类添加到父元素

我有以下标记：

＆＃13;

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

＆＃13;

.red { background: red; }

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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

＆＃13;

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

＆＃13;

.red { background: red; }

＆＃13;

<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>

＆＃13;

Answer 2

this块中的

if未引用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>

如果child aria-expanded = true，则将class添加到parent元素

2 个答案: