根据按钮的属性值添加/删除 css 类

Question

我有一个展开/折叠导航菜单的按钮。我需要将按钮的图标从“左”箭头图标切换到“右”箭头图标。如何根据属性值更改此导航按钮的图标？ 我想用 jQuery 通过添加/删除 css 类来实现它。

<button class="t-Button t-Button--icon t-Button--header t-Button--headerTree" aria-label="Expand / Collapse Navigation" title="Expand / Collapse Navigation" id="t_Button_navControl" type="button" aria-controls="t_TreeNav" aria-expanded="true">
  <span class="fa-angle-double-left fa-lg" aria-hidden="true"></span>
</button>

$('.t-Header-controls button').on('classChange', function() {

$('.t-Header-controls button[aria-expanded="true"]').find('span').addClass('fa fa-angle-double-left fa-2x fa-lg');
$('.t-Header-controls button[aria-expanded="false"]').find('span').addClass('fa fa-angle-double-right fa-2x fa-lg');

});

我需要向 span 元素添加/删除类。 上面的代码不起作用。 基本上当按钮单击和按钮的属性 aria-expanded="false" 我需要删除 .fa-angle-double-left 类并添加 .fa-angle-double-right 类。但是当再次单击按钮并且按钮的属性 aria-expanded="true" 时，我需要删除 .fa-angle-double-right 类并添加 .fa-angle-double-left 类。

我看到，当侧边菜单打开（展开）时，按钮的“区域展开”属性变为“true”：aria-expanded="true" 此时我需要按钮的图标是“左”方向箭头 - “fa-angle-double-left fa-lg”类。

当侧边菜单关闭（折叠）时，按钮的“area-expanded”属性变为“false”：aria-expanded="false" 此时我需要按钮的图标是“右”方向箭头 - “fa-angle-double-right fa-lg”类。

请帮助找到正确的解决方案

Answer 1

一个精简的方法是使用toggleClass。覆盖 CSS 中的图像 url 或字形并在点击时切换类。为活动类添加另一个选择器到您的 CSS 并更改图像。

例子：

<style>
.element {
 background-image: url(your icon);
}
.element.active {
 background-image: url(your other icon);
}
</style>
<script>
$(.element).click(function(){
 $(this).toggleClass('active');
}
</script>

Answer 2

属性更改时不会引发事件。另一种方法是在您以编程方式更改属性时手动引发事件：

$('.t-Header-controls button').attr('aria-expanded','false').trigger('classChange');

// in another js file
$('.t-Header-controls button').on('classChange', function() {
    $('.t-Header-controls button[aria-expanded="true"]').find('span').addClass('fa fa-angle-double-left fa-2x fa-lg');
    $('.t-Header-controls button[aria-expanded="false"]').find('span').addClass('fa fa-angle-double-right fa-2x fa-lg');
});