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

Question

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

该d-flex用于引导4名单徽章.

建议？

// 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将覆盖display: none其hide()放元件上.

你可以把容器放在你的li里面(我在示例小提琴中使用了div)并添加.d-flex到它们上面,因此display: noneli不会被覆盖.

在这里小提琴

Answer 2

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

这否定了!importantBootstrapd-flex类中的 。结果是display:none;在使用 JQueryhide()函数时可以工作。当使用JQueryshow()函数时，display:flex;会重新添加。

Answer 3

.hide()将显示设置为块，并且您正在使用 Flex，请使用addClass()和removeClass()到show hideFlex 容器。

编辑：

除了您在准备好的文档之外或在代码片段中使用脚本之外，您将它们添加到函数之外$(document).ready()并且您正在使用jquery.slim，因此功能将是最小的并添加display:none到您的列表中，这将是真正的东西

编辑2

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

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

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

请参阅下面的演示

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

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

Answer 4

由于您打算隐藏该元素，因此我认为删除 d-flex 不会有问题。

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

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

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

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