Question

我有两个可以触发折叠菜单的链接（1）链接文本，以及（2）一个图标。

<div class="brand"><a data-toggle="collapse" data-target="#menu-content">Browse by Collection</a></div> 

<i class="toggle-btn ion-android-add" data-toggle="collapse" data-target="#menu-content"></i>

<ul id="menu-content" class="menu-content collapse">...</ul>

我想这样做，以便当通过这两种方法中的任何一种方法打开折叠菜单时，加号（.ion-android-add）更改为减号（.ion-android-remove），然后返回当菜单折叠时加入加号。

我尝试过在其他答案中找到的各种jquery片段，例如切换类，或者添加/删除类，但似乎没有什么可以解决问题。提前谢谢！

编辑：我最终让它使用此代码：

$('.toggle-btn').on('click', function() {
    $(this).toggleClass('ion-android-add ion-android-remove');
});

但是，这仅适用于按钮。我怎样才能这样做，当我点击品牌div时，它也会影响图标？

Answer 1

使用jQuery很容易做到这一点。还有更多的方法，但首先出现在我的脑海中：

$('.ion-android-add').click(function(){
 $(this).removeClass('ion-android-add').addClass('ion-android-remove');
});

$('.ion-android-remove').click(function(){
 $(this).removeClass('ion-android-remove').addClass('ion-android-add');
});

单击按钮切换类

1 个答案: