How can I go about toggling a class if aria=expanded === true
? I have the following markup:
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>
js
$(function () {
if ($('pdp-accord-toggle').attr('aria-expanded') === true) {
$(this).find(".accordion-plus").toggleClass("accordion-minus");
}
})
edit - more info
Basically I watch to switch between a plus
icon and a minus
icon, replacing the img
in the .accordion-class
with content: url(another image);
. Here is my CSS as well.
css
.accordion-plus {
height: 1em;
float: right;
margin-right: 1em;
}
.accordion-minus {
opacity: .5;
content: url(../../assets/img/minus-1.png);
}
looks like you're just missing the class prefix on the selector
if ($('.pdp-accord-toggle').attr('aria-expanded') === "true") {
}
it returns a string aswell, so wrap the true in quotes
这会更容易
$("#pdp-accord-toggle[aria-expanded='true']").find(".accordion-plus")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.