jQuery＆amp; font-awesome - 如果没有移动鼠标，则click（）会发生两次

Question

我有两个字体真棒图标与$ .click（）监听器连接，应隐藏点击的图标并在其位置显示相反的图标。见https://jsfiddle.net/sz7Ldynr/3/。

如果您在不移动鼠标的情况下多次单击该图标，则.click函数将触发两个图标但仅在某些时间触发。在Chrome和Edge上，大约有9次点击，在FF上，每5次点击只有1次。如果您在中间点击之间移动鼠标，则它会正常工作。

HTML：

<div class="collapsible">
  <i class="toggle-content fa fa-minus-square" aria-hidden="true" style="display: none;"></i>
  <i class="toggle-content fa fa-plus-square" aria-hidden="true"></i>
  <div class="content">
     <h3>Hello</h3>
  </div>
</div>

JS：

$( '.collapsible .toggle-content' ).click( function() { 
  $( this ).parent().find( '.content' ).toggle();
  $( this ).parent().find( '.toggle-content' ).toggle();
} );

如果用户没有移动鼠标，有没有办法避免向两个侦听器注册点击？