javascript - Bootstrap 阻塞 jquery 函数

Question

我需要使用 jQuery 的 slideDown 函数，这需要将要动画的内容放在类“.hide”下，

对于 .hide 我在我的自定义 css 中有这个:

.hide {
    display: none;
}

它与 Bootstrap css 冲突，因为它包含:

.hide {
    display: none !important;
}

因此，当我链接这两个样式表时，slideDown 无法正常工作，然后我在两个文件中尝试了 .hide 的不同变体，最后从我的自定义 css 文件中删除 .hide 完全有效，

所以我的问题是，当 Bootstrap“.hide”和自定义 css“.hide”中定义的属性完全相同时，为什么自定义 css 中的 .hide 会影响结果，除了具有“!important”之外(我猜，如果我错了请更正)暗示自定义选择器会被优先考虑？

我正在尝试使用 codepen 共享我的代码的工作版本，但我不知道为什么我的代码在 codepen 上仍然无法运行:http://codepen.io/anon/pen/RaGJwE

Answer 1

!important 总是很强大。如果您随后使用 display: block !important; 就可以绕过它。

最简单的方法是不使用 Bootstrap 所针对的“隐藏”或“隐藏”类。只需将类更改为“hideit”或此更新的 fiddle 中的其他内容: http://codepen.io/anon/pen/MyjXOv