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");
});
});