如果aria-expanded === true,则添加类

11

如果 aria=expanded === true,我该如何切换类? 我有以下的标记:

html

<a id="{{content.static.productDetailsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">{{content.static.productDetailsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>

JavaScript

$(function () {
  if ($('pdp-accord-toggle').attr('aria-expanded') === true) {
    $(this).find(".accordion-plus").toggleClass("accordion-minus");
  }
})

编辑-更多信息

基本上我想要在.accordion-class中用content: url(另一张图片);替换img,并在加号减号之间切换。以下是我的CSS。

CSS

.accordion-plus {
  height: 1em;
  float: right;
  margin-right: 1em;
}

.accordion-minus {
  opacity: .5;
  content: url(../../assets/img/minus-1.png);
}

1
如果 ($('.pdp-accord-toggle').attr('aria-expanded') === true) 就可能是 ID 的问题。它由 # 使用,但不确定是否是 ID。 - Himesh Aadeshara
2个回答

18

看起来你只是在选择器上缺少了类前缀

  if ($('.pdp-accord-toggle').attr('aria-expanded') === "true") {
  }

它也返回一个字符串,因此请用引号将true括起来。


2

这会更容易

$("#pdp-accord-toggle[aria-expanded='true']").find(".accordion-plus")

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接