Bootstrap 3 - 带图标的嵌套折叠

Question

我正在尝试使用图标创建嵌套折叠，但是当我单击主折叠中的子项时，父图标会更改。我该如何防止这种情况？

JSFiddle

HTML：

<div class="aside-archives">
<h3>Archive</h3>

<div class="aside-archive">
<div data-toggle="collapse" data-target="#2014">
<i class="fa fa-caret-right"></i>2014
</div>

<div id="2014" class="collapse">
<ul>
<li data-toggle="collapse" data-target="#january-2014"><span class="fa fa-caret-right"></span> January (3)
<div class="collapse-inner" id="january-2014">
<a href="">Lorem ipsum dolor.</a>
<a href="">Optio, voluptatem, earum!</a>
<a href="">Officiis, sint, possimus.</a>
</div>
</li>

<li>February (1)</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
</div>
</div>

</div>

JQUERY：

var collapse = $('.collapse');

collapse.on('hide.bs.collapse show.bs.collapse', function (e) {
    e.stopPropagation();
    var $this = $(this),
    parent = $this.parent(),
    icon = parent.find('i');

    icon.toggleClass('fa-caret-right fa-caret-down');
  });