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不会有问题。

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

因此，当您打算再次显示该元素时，可以使用

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

Answer 2

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

编辑：

除了您在文档就绪之外或在代码段中使用脚本之外，您已将它们添加到$(document).ready()函数之外，并且您正在使用jquery.slim因此功能最小并添加{{1}对你的lis来说这将是真实的东西

<强> EDIT2

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

onclick

现在，您可以从我在演示中使用的$("#hide").on('click', function() { $("#myList2 li:even").hide().toggleClass('d-flex'); });中删除课程#myList2 li。

参见下面的演示

＆＃13;

CSS

＆＃13;

$(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');
  });
});

＆＃13;

#myList2 li {
  display: none;
}

＆＃13;

Answer 3

总的来说，我同意@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。

Answer 4

前面的回答已经说明，引导程序的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 5

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

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

bootstrap 4列表项有d-flex类不响应.hide（）？

5 个答案: