bootstrap5 d-none隐藏与jquery show()冲突

假设我创建了一个这样的 HTML 元素，
<div id="my-div" class="d-none">Hello, TB5</div>

我如何从 jQuery/Javascript 显示和隐藏该 HTML 元素。
$(function(){
  $("#my-div").show();
});
但是元素并没有显示，为什么？

f12打开浏览器调试模式，发现，虽然jquery给元素加上了display:block显示，但是并没有起作用。

原因是因为bs5中d-none的样式是，display: none!important;是优先起作用的。

.d-none {
  display: none!important;
}

怎样实现Bootstrap5 d-none隐藏元素并使用 jQuery 显示它呢？

方法一：直接通过jquery删除css类

$("#my-div").removeClass('d-none'); //显示
$("#my-div").addClass('d-none'); // 隐藏
$("#my-div").toggleClass('d-none'); // 切换

方法二：直接通过jquery修改css属性值

$("#my-div").css('display', 'block !important');

方法三：解决此烦恼的另一种方法是创建您自己的 CSS 类，该类不会在规则末尾设置 !important，如下所示：
.hideMe {
    display: none;
}
并像这样使用：
<div id="my-div" class="hideMe"></div>
现在jQuery隐藏工作
$('#my-div').show();