0
有人可以帮助我解决小错误。我使用bootstrap 4 alpha 6.在下面你可以看到图片。 
正如你所看到的，我的页面中有几个折叠块。其中一个崩溃块在其他崩溃块内。当我点击按钮打开该内部块（使用内部数据切换）时，它会更改顶部数据切换的图标。我在JS中做了什么错误？Bootstrap崩溃更改图标
HTML：
<div class="card">
<div class="card-header">
<div class="d-flex align-items-center justify-content-between">
<button data-toggle="collapse" data-target="#collapse-group-task" aria-expanded="false" aria-controls="collapse-group-task">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="card-block">
<div class="collapse" id="collapse-group-task">
<div class="list-group">
<div class="d-flex w-100 justify-content-end custom-d-flex">
<a data-toggle="collapse" href="#collapse-group-task-1" aria-expanded="false" aria-controls="collapse-group-task-1">
<i class="fa fa-comments-o" aria-hidden="true"></i>	<span>Comments</span>
</a>
</div>
<div class="collapse w-100 comment-list-block" id="collapse-group-task-1">
***SOME TEXT***
</div>
</div>
</div>
</div>
</div>
</div>
JS：
$(document).ready(function() {
$('.collapse')
.on('shown.bs.collapse', function() {
$(this)
.parent().parent()
.find(".fa-eye")
.removeClass("fa-eye")
.addClass("fa-eye-slash");
})
.on('hidden.bs.collapse', function() {
$(this)
.parent().parent()
.find(".fa-eye-slash")
.removeClass("fa-eye-slash")
.addClass("fa-eye");
});
});