Bootstrap - 使用jquery进行图标切换

Question

我试图切换Bootstrap的图标时遇到了一些问题.当我运行代码时,它会在第一次点击它切换的图标时执行预期,但是当我再次单击它时它不会改变.在这里我的代码和任何帮助将不胜感激!

<a><i class="icon-plus"></i></a>

<script>
  $(".icon-minus").click(function(){
    $(this).removeClass("icon-minus").addClass("icon-plus");
  });
  $(".icon-plus").click(function(){
    $(this).removeClass("icon-plus").addClass("icon-minus");
  });
</script>

更新1:

此图标用于可折叠菜单,其代码可在此处找到:)

Answer 1

jsBin演示

$(".icon-minus, .icon-plus").click(function(){
    $(this).toggleClass("icon-minus icon-plus");
});

或者,如果您动态创建元素:

$("#parent_el_NOT_dyn_gen").on('click','.icon-minus, .icon-plus',function(){
    $(this).toggleClass("icon-minus icon-plus");
});