具有 d-flex 类的 bootstrap 4 列表项不响应 .hide()？

Question

当我添加 d-flex 类时，我的 Bootstrap 4 <ul> 列表项不再响应 .hide()，即使 style="display: none;" 已添加到 DOM。

d-flex 用于Bootstrap 4 list 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>

Answer 1

.d-flex 使用 !important 覆盖了 hide() 放置在元素上的 display: none。

您可以将容器放在您的 li 中（我在示例小提琴中使用了 div）并将 .d-flex 添加到它们上，这样 li 上的 display: none 就不会被覆盖。

Fiddle here

Answer 2

既然你打算隐藏元素，我认为移除 d-flex 不会有问题。

$('.hide').click(function(){
  $(".my-flex").removeClass("d-flex").addClass("d-none");
});

所以当你打算再次显示元素时，你可以使用

$('.show').click(function(){
  $(".my-flex").addClass("d-flex").removeClass("d-none");
});

或者，您可以添加一个父元素，然后您可以随时隐藏和显示

Answer 3

我的解决方法是不使用class="d-flex"，而是使用style="display:flex;"。

这否定了 Bootstrap 的 d-flex 类中的 !important。结果是 display:none; 将在使用 JQuery hide() 函数时起作用。当使用 JQuery show() 函数时，display:flex; 被重新添加。

Answer 4

.hide() 将显示设置为阻止，并且您正在使用 flex，使用 addClass() 和 removeClass() 到 show hide flex 容器。

编辑：

除了您在准备好文档之外或在代码 sn-p 中使用脚本之外，您将它们添加到 $(document).ready() 函数之外并且您正在使用 jquery.slim 因此功能将是最少的并将display:none 添加到您的 lis这将是真实的

EDIT2

这可以通过两种方式完成，一种是包含一个类并添加display:none 属性，或者我也喜欢的第二种方式是在调用.toggleClass() 之前调用.hide()，这意味着onclick事件将被转换为

$("#hide").on('click', function() {
    $("#myList2 li:even").hide().toggleClass('d-flex');
  });

现在您可以从我在演示中使用的CSS 中删除类#myList2 li。

请看下面的演示

$(document).ready(function() {
  // 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");


  // <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>
  $("#hide").on('click', function() {
    $("#myList2 li:even").toggleClass('d-flex');
  });
});

#myList2 li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>

<button id="hide">HIDE /SHOW NOW</button>
<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>

Answer 5

正如前面的回答已经解释的那样，bootstrap 的d-flex 类被定义为display: flex !important;

就我而言（如果这些 div 标记为 d-flex，活动选项卡窗格仍会显示非活动窗格中的 div），我使用自定义规则解决了它：

div.tab-pane:not(.show).d-flex,
div.tab-pane:not(.show) .d-flex {
  display: none !important;
}

Answer 6

总的来说，我同意@Matthew Allen 的解决方案，但是，如果您的项目已经在运行并且不想重新编写所有 HTML，请考虑使用这样的单个 CSS 规则：

.d-flex[style*="display:none"], .d-flex[style*="display: none"] {
    display:none !important;
}

据我了解，Bootstrap CSS 代码添加了 'display:flex !important' 以使 d-flex 流行于其他显示类，但我认为它不必覆盖内联 display:none。