Question

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

<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');

}）;

我需要添加/删除类来跨越元素。上面的代码不起作用。基本上，当单击按钮和按钮的属性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”类。

关闭（折叠）侧边菜单后，按钮的“区域扩展”属性将更改为“假”：aria-expanded =“ false” 此时，我需要将按钮的图标设为“右”方向箭头-“ fa-angle-double-right fa-lg”类。

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

Answer 1

一种精简的方法是使用toggleClass。覆盖CSS中的图片网址或字形，并在点击时切换类。在活动类的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');
});

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

2 个答案: