当我添加课程时d-flex我的引导程序 4<ul>列表项不响应.hide()不再，尽管style="display: none;"被添加到 DOM 中。
The d-flex用于Bootstrap 4 列表徽章 https://getbootstrap.com/docs/4.0/components/list-group/#with-badges.
建议？
// test 1: regular list, no issue
$("#myList li:even").addClass("disabled").hide()
// <li class="list-group-item" style="display: none;">First item</li>
// test 2: list with badges, no response to hide (class "disabled" still works)
// just adding class "d-flex" is sufficient to reproduce issue
//$("#myList2 li").addClass("d-flex")
$("#myList2 li").addClass("d-flex justify-content-between align-items-center")
$("#myList2 li").append("<span class='badge badge-primary'>test</span>")
$("#myList2 li:even").addClass("disabled").hide()
// <li class="list-group-item d-flex justify-content-between align-items-center" style="display: none;">First item<span class="badge badge-primary">test</span></li>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<h3>regular list</h3>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
<h3>with d-flex class (used for badge)</h3>
<ul class="list-group" id="myList2">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
.d-flex uses !important这会覆盖display: none which hide()穿上该元素。
您可以将容器放入您的 li 中（我在示例小提琴中使用了 div）并添加.d-flex对他们如此display: noneli 上的内容不会被覆盖。
在这里摆弄 https://jsfiddle.net/ks5nf9be/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
