我使用 bootstrap 4 alpha 6 版本。在我的页面中,我有几个折叠块。我想在用户打开/关闭该块时更改图标。由于我有几个这样的块,我使用了类,但它不起作用。我做错了什么?附:当我在 JS 中使用 id 时效果很好,但是正如你所看到的,我有几个折叠块并且不想“复制和粘贴”。
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");
});
});
问题是:所有
button
和 .collapse
元素都位于同一 DOM 级别,这意味着当 .collapse
的 shown.bs.collapse
或 hidden.bs.collapse
事件被触发时,事件处理程序点中的 $(this).parent()
到 .collapse
的父级——代码中未显示的最外面的一个。让我们把它设为OUTER
。然后,当您在 find
上调用 removeClass
、addClass
和 OUTER
时,所有图标都会更改,这就是为什么“它不起作用”。
要解决此问题,您需要制作一个单元包装器,其中包含一组
button
和 .collapse
元素。这样,$(this).parent()
就会指向该组,并且只有单击的按钮图标发生变化。
我已经制作了修复程序的片段,请检查:
$(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");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/b4f468aefc.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="wrapper">
<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 class="collapse" id="collapse-projects">
***SOME CONTENT***
</div>
</div>
<div class="wrapper">
<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 class="collapse" id="collapse-tasks">
***SOME CONTENT***
</div>
</div>