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

2024-05-21

当我添加课程时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(使用前将#替换为@)

Bootstrap 4 具有 d-flex 类的列表项不响应 .hide()? 的相关文章

  • Android 4.3 和 PhoneGap,无法点击链接

    我在 Galaxy Note 3 上使用 PhoneGap 2 9 我的布局类似于 Facebook 手机的布局 它有一个从左侧滑出的导航栏 我遇到的问题是 当导航栏的按钮超出屏幕大小并需要滚动时 无法点击它们 也就是说 它们不会执行预期的
  • JQuery更新数据-属性

    考虑以下相册示例 相册的首页和最后一页是相册跨页大小的一半 我设置了attr data width and attr data width correct 用于比较 例如 checkImageDimesions 附加对象数据 不是简单的字符
  • 如何格式化 内的文本以创建像 gmail 这样的边界框/标签系统,SO

    我正在构建一个边界框 边界框用于gmail 当你写一个联系人时 它会出现一个边界框 另一个例子是 YouTube 当你写标签时 我正在尝试创建一个类似的脚本 但我在这里遇到了一些麻烦 我想将我的脚本放在输入框中 但问题是 当我使用 html
  • 如何在 jQuery 中检查元素是否有多个 css 类

    我有一些像下面这样的html 我循环遍历了 div accordionContents 内的所有元素 在循环内 我需要检查元素 h2 是否应用了两个 css 类 acc trigger 和 active 的条件 我该怎么做 div div
  • 单击按钮时,如何将数字存储在 html 表单输入中作为 javascript 变量? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 基本上我想做的是 当用户在 HTML 表单输入字段中输入一个数字 然后按下提交按钮时 该数字将存储在 JavaScript 变量中
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • 强制一个 javascript 函数等待运行,直到第一个函数完成

    下午 我遇到了一个问题 我需要运行一个函数 然后在完成后 运行下一个函数 并对四个函数执行此操作 我已经尝试了一段时间 试图找到正确的布局语法我的函数调用但似乎找不到任何东西来解决这个特定的场景 html div div div jquer
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 如果未选中复选框,jquery 清除输入字段

    我有以下 jquery 如果选中复选框 用户可以填写表单中的其他字段 我想要的是如果未选中该复选框 则清除附加输入字段值 document ready function input checkbox attr checked false x
  • 在弹出警报框之前将其删除[重复]

    这个问题在这里已经有答案了 我正在尝试使用 Grease Monkey 和 jQuery 删除外部站点上的警报框 HTML p Hello world p GreaseMonkey 脚本 目前没有 jQuery 部分 UserScript
  • 使用 JQuery 定义要附加的 HTML 模板

    我有一个正在循环的数组 每次条件成立时 我想附加一份副本HTML下面的代码到具有一些值的容器元素 我可以在哪里放置此 HTML 以以智能方式重复使用 a href class list group item div class image
  • Twitter Bootstrap 响应式实用程序类的使用

    如何使用 Twitter Bootstrap 响应式实用程序类 例如 visible desktop 我尝试按照 Bootstrap 网站上的示例进行操作 span class visible desktop Desktop span 在这
  • PhoneGap/Cordova:如何使用cookies(iOS)?

    我有一个适用于 iOS 的 PhoneGap Corodova 项目 在 iOS 模拟器上构建时 我使用了 Jquery Cookies 它们很好 但是 既然我的设备上有该应用程序用于测试 它们就不再工作了 我猜这只是 iOS 不支持的东西
  • jQuery .append 不起作用

    我想在我的表单中插入一些东西 这些东西被硬编码到插件中 我不想弄乱插件文件 所以我发现 append 我写过类似的东西 据我所知它应该有效 Chrome 中的控制台没有显示任何错误 这是有什么问题吗 由于 wordpress 安全模式 我正
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • Jquery 拖放和克隆

    嗨 我需要实现这个 我有一套可掉落的物品 基本上我是在服装上掉落设计 并且我正在掉落一个克隆 如果我不喜欢删除的对象 设计 我想通过执行隐藏之类的操作来删除它 但我无法做到这一点 请帮我 这是代码 var clone document re
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • javascript中输入类型时间的值

    我有这个html
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2

随机推荐

  • 使用 xctool 运行单个 KIWI 规范

    有没有人能够成功地将 KW SPEC 变量传递给 xctool 我正在尝试使用以下命令来运行单个 KIWI 规范https github com kiwi bdd Kiwi wiki Kiwi FAQ q how do i run a si
  • 一页上有多个容器

    我最近开始使用 Twitter Bootstrap 并尝试了解它是如何工作的 我正在看流体布局示例 http twitter github com bootstrap examples fluid html源代码 有两个容器 div cla
  • 文件上传后如何隐藏上传按钮?

    我使用 blueimp 和 jquery UI 进行文件上传 我想在上传文件后隐藏此按钮 并在照片被删除时再次显示它 我该怎么做呢 这是我的 HTML
  • 使用 scikit-learn 进行二次采样 + 分类

    我正在使用 Scikit learn 进行二元分类任务 并且我有 0 级 有 200 个观察值 第 1 类 有 50 个观察值 而且因为我有不平衡的数据 我想抽取多数类的随机子样本 其中观察数量与少数类相同 并且希望使用新获得的数据集作为分
  • 如何关闭与数据库的现有连接

    我想关闭与 MS SQL Server 的现有连接 以便可以通过编程方式对该数据库进行恢复 这应该会断开其他所有人的连接 并使您成为唯一的用户 alter database YourDb set single user with rollb
  • 如何在 PHP 中运行 shell 脚本?

    我正在尝试使用 PHP 触发 shell 脚本的运行 本质上 当用户在我们用 PHP 编写的网站上完成一个操作时 我们希望触发一个 shell 脚本 该脚本本身调用一个 Java 文件 提前致谢 See shell exec http ph
  • PhotoChooserTask 抛出未处理的异常

    我已经有了这段代码 我使用它来显示一个按钮 该按钮允许用户从他的库中选择图像并将其用作我的应用程序的背景 所以我创建了一个PhotoChooserTask 将其设置为显示相机并将其绑定到任务完成时必须执行的方法 该按钮将通过显示PhotoC
  • has_many 关系中的 Active Record 对象何时保存?

    我正在使用 Rails 1 2 3 是的 我知道 并且对如何使用感到困惑has many适用于对象持久性 为了举例 我将使用它作为我的声明 class User lt ActiveRecord Base has many assignmen
  • 'numpy.float64'对象没有属性'translate'在Python中将值插入Mysql

    import dataset db dataset connect table db 当我尝试向 Mysql 表中插入一些值时 发生了此错误 我插入表中的示例值 print Buy ticker price date OType OSize
  • 在代码中旋转按钮(或其中的文本)

    我必须通过编码随机旋转按钮 或里面的文本 它是相同的 API级别低于11是否有button setRotate x 好吧 看了一下 答案是 很复杂 您可以使用旧的动画框架旋转按钮 例如像这样 Button button Button fin
  • 运行“npm install”:Node-gyp 错误 - MSBUILD.exe 失败,退出代码:1

    我在跑npm install在 Windows 上安装我的项目中的所有软件包 然后我收到有关 MSBUILD exe 的错误 gyp ERR stack Error C Program Files x86 Microsoft Visual
  • php exec 返回的结果比直接进入命令行要少

    我有一个 exec 命令 它的行为与通过 Penguinet 给 linux 的相同命令不同 res exec cd mnt mydirectory zcat log file gz echo res 当将命令直接放入命令行时 我在日志文件
  • 限制分页页数

    objConnect mysql connect localhost root or die mysql error objDB mysql select db Test strSQL SELECT FROM UserAddedRecord
  • 如何减去两个 gettimeofday 实例?

    我想减去两个 gettimeofday 实例 并以毫秒为单位给出答案 这个想法是 static struct timeval tv gettimeofday tv NULL static struct timeval tv2 gettime
  • 导航组件参数默认值

    在导航组件中 将参数从第一个片段发送到第二个片段时 默认值不会从导航图中获取哪个集合 这是我的代码 导航图 xml
  • 如何使用 Cucumber 和 Rspec 测试 Rails 3 引擎?

    如果这个问题有点主观 我深表歉意 我正在尝试找出使用 Cucumber 和 Rspec 测试 Rails 3 引擎的最佳方法 为了测试引擎 需要 Rails 3 应用程序 这是我目前正在做的事情 通过运行以下命令将 Rails 测试应用程序
  • 如何使用 HTML5 + Javascript 或服务器端语言仅裁剪某些区域?

    在提出我的问题之前 我有一个测试页 以便每个人都能更好地理解我的问题 网址是http iamthemoon com crop http iamthemoon com crop 您可以移动红色选区 我喜欢只裁剪红色选区的区域 我认为这可以在
  • Tensorflow 对 Python3.11 的支持

    我在 Windows10 PC 上安装了 Python3 11 0 尝试使用以下命令安装张量流 pip install tensorflow 给出错误 访问tensorflow网站后 我意识到它仅支持3 7 3 10 我应该降级 pytho
  • heroku 上的 bitbucket 私有存储库

    我有一个需要 gem 的 Rails 应用程序 我将这个 gem 托管在私有存储库的 bitbucket 上 在我的 Gemfile 中 我添加了 gem 如下所示 gem my gem git gt gi email protected
  • Bootstrap 4 具有 d-flex 类的列表项不响应 .hide()?

    当我添加课程时d flex我的引导程序 4 ul 列表项不响应 hide 不再 尽管style display none 被添加到 DOM 中 The d flex用于Bootstrap 4 列表徽章 https getbootstrap