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

当我添加class

d-flex

时，我的引导程序4

列表项不再响应

.hide（）

，即使

style=“display:none；”

已添加到DOM中

d-flex

用于

建议

//测试1：常规列表，无问题
$（“#myList li:even”）.addClass（“disabled”）.hide（）
//第一项
//测试2：带有徽章的列表，没有隐藏响应（类别“disabled”仍然有效）
//仅仅添加类“d-flex”就足以重现这个问题
//$（“myList2 li”）.addClass（“d-flex”）
$（“#myList2 li”）.addClass（“对齐项目中心之间的d-flex内容对齐”）
$（“#myList2 li”）。附加（“测试”）
$（“#myList2 li:偶数”）.addClass（“禁用”）.hide（）
//第一项测试

定期名单

第一项
第二项
第三项
第四项

带d-flex类（用于徽章）

第一项
第二项
第三项
第四项

.hide（）

将显示设置为块，如果您正在使用flex，请使用

addClass（）

和

removeClass（）

来

显示
隐藏
flex容器

编辑：

除了在document ready外部或在代码段中使用脚本之外，您还将脚本添加到
$（document）.ready（）
函数外部，并且您正在使用
jquery.slim
，因此功能将是最小的，并将
display:none
添加到您的lis中，这将是真正的lis

EDIT2

这可以通过两种方式完成：一种是包含一个类并添加
display:none
属性，另一种我更喜欢的方式是在调用
之前调用
.hide（）
，这意味着
onclick
事件将转换为

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

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

请参见下面的演示


$（文档）.ready（函数（）{
//测试1：常规列表，无问题
$（“#myList li:even”）.addClass（“disabled”）.hide（）
//第一项
//测试2：带有徽章的列表，没有隐藏响应（类别“disabled”仍然有效）
//仅仅添加类“d-flex”就足以重现这个问题
//$（“myList2 li”）.addClass（“d-flex”）
$（“#myList2 li”）.addClass（“对齐项目中心之间的d-flex内容对齐”）
$（“#myList2 li”）。附加（“测试”）
$（“#myList2 li:偶数”）.addClass（“禁用”）；
//第一项测试
$（“#隐藏”）。在（'单击'，函数（）上{
$（“#myList2 li:偶数”）.toggleClass（'d-flex'）；
});
});
#myList2 li{
显示：无；
}

定期名单

第一项
第二项
第三项
第四项

立即隐藏/显示
带d-flex类（用于徽章）

第一项
第二项
第三项
第四项
.d-flex
使用
！重要信息
它覆盖了
显示：无
它将
隐藏（）
放置在元素上

您可以将容器放在您的li中（我在示例fiddle中使用了div），然后将
.d-flex
添加到它们上，这样就不会覆盖li上的
显示：none

既然您打算隐藏该元素，我认为删除d-flex不会有问题

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

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

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

另一方面，您可以添加一个父元素，可以在任何时候隐藏和显示，
< P>。一般来说，我同意@ Matthew Allen的解决方案，但是，如果您的项目已经工作了，不想再修改所有的HTMLs，请考虑使用一个这样的CSS规则：

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

据我所知，引导CSS代码添加了“display:flex！重要提示“为了使d-flex在其他显示类中流行，但我不认为它必须覆盖内联显示：无。
正如前面的答案所解释的，bootstrap的
d-flex
类定义为
display:flex！重要的

在我的例子中（如果那些div被标记为
d-flex
，那么活动选项卡窗格仍然显示来自非活动窗格的div），我使用自定义规则解决了这个问题：

div.tab-pane:not（.show）.d-flex，
div.tab-pane:非（.show）.d-flex{
显示：无！重要；
}
我决定不使用
class=“d-flex”
而是使用
style=“display:flex；”

这否定了
！重要信息
来自Bootstrap的
d-flex
类。结果是
显示：无hide（）
函数时，code>将起作用。使用JQuery
show（）
函数时，
display:flex被重新添加
 欢迎您@wivku，我刚刚更新并添加了更多信息，请修改此笑话！重要的。。。他们甚至拒绝了PR——当涉及导航标签时，这是最具体的解决方案。我欠你一杯啤酒