嘿，我之前也踩过这个坑！Bootstrap的d-none类因为加了!important，确实会把jQuery常规的show()/hide()/toggle()方法卡得死死的——毕竟这些方法是通过修改元素行内样式的display属性来工作的，干不过!important的优先级。针对你提到的几种思路，我整理了具体可行的解决方案：

方案1：切换Bootstrap原生的display类（最推荐） #

既然用了Bootstrap，那就顺着它的设计来——直接操作d-none（或其他响应式display类）的添加/移除，完全避开优先级冲突：

• 显示元素：移除d-none类
• 隐藏元素：添加d-none类
• 切换显示状态：切换d-none类

示例代码：

// 显示目标div
$('#yourTargetDiv').removeClass('d-none');

// 隐藏目标div
$('#yourTargetDiv').addClass('d-none');

// 切换显示/隐藏
$('#yourTargetDiv').toggleClass('d-none');

如果需要保留响应式特性，比如只在移动端隐藏、桌面端显示，还可以切换对应的响应式类，比如d-md-block/d-md-none，完全符合Bootstrap的设计逻辑。

方案2：自定义不带!important的隐藏类 #

如果你习惯用jQuery的show()/hide()，可以自己定义一个没有!important的隐藏类来替代d-none：

.custom-hidden {
  display: none;
}

然后在HTML里给目标div加上custom-hidden类，之后jQuery的show()/hide()/toggle()就能正常工作了——因为这个自定义类没有!important，jQuery修改行内样式时能覆盖它。

方案3：直接操作元素的行内样式 #

如果不想改动类，也可以直接强制修改元素的style.display属性（行内样式的优先级高于样式表中的!important）：

// 显示元素（根据需求换成block/flex/inline-block等）
$('#yourTargetDiv').css('display', 'block');

// 隐藏元素
$('#yourTargetDiv').css('display', 'none');

// 切换显示状态
const $div = $('#yourTargetDiv');
$div.css('display', $div.css('display') === 'none' ? 'block' : 'none');

⚠️ 注意：这个方法会覆盖Bootstrap的响应式display类，比如原本设置的d-md-none会失效，所以如果需要响应式适配，不推荐用这个方案。

内容的提问来源于stack exchange，提问作者Trent Grandey