Bootstrap 4 更改折叠图标

Question

我使用 bootstrap 4 alpha 6 版本。在我的页面中，我有几个折叠块。我想在用户 open/close 阻止时更改图标。因为我有几个这样的块，所以我使用了 class 但它没有用。我做错了什么？ P.S。当我在 JS 中使用 id 时工作正常，但如您所见，我有几个崩溃块并且不想 "copy & paste".

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-projects" aria-expanded="false" aria-controls="collapse-projects">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-projects">
           ***SOME CONTENT***
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
         <div class="d-flex align-items-center justify-content-between">
              <button data-toggle="collapse" data-target="#collapse-tasks" aria-expanded="false" aria-controls="collapse-tasks">
                    <i class="fa fa-eye" aria-hidden="true"></i>
              </button>
         </div>
    </div>
    <div class="card-block">
        <div class="collapse" id="collapse-tasks">
           ***SOME CONTENT***
        </div>
    </div>
</div>

JS:

$(document).ready(function () {
            $('.collapse')
                .on('shown.bs.collapse', function() {
                    $(this)
                        .parent()
                        .find(".fa-eye")
                        .removeClass("fa-eye")
                        .addClass("fa-eye-slash");
                })
                .on('hidden.bs.collapse', function() {
                    $(this)
                        .parent()
                        .find(".fa-eye-slash")
                        .removeClass("fa-eye-slash")
                        .addClass("fa-eye");
                });
        });

Answer 1

问题是：你的所有 button 和 .collapse 元素都在同一个 DOM 级别，这意味着当 .collapse 的 shown.bs.collapse 或hidden.bs.collapse 事件被触发，事件处理程序中的 $(this).parent() 指向 .collapse 的父级——代码中未显示的最外面的父级。让我们把它设为 OUTER。然后，当您在 OUTER 上调用 find、removeClass 和 addClass 时，所有图标都会更改，这就是 "it didn't work".

的原因

要解决此问题，您需要制作一个包含一组 button 和 .collapse 元素的单元包装器。这样，$(this).parent()会指向组，只改变点击按钮的图标。

我已经做了一个jsfiddle修复，请查看。

Bootstrap 4 更改折叠图标

Bootstrap 4 change icon in collapse

javascript

html

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4