>我有一个在页面加载时隐藏的div。使用 BS4，我正在使用 d-none 类完成此操作。这很好用，我确实了解 BS4 中的响应式显示类。我的问题是我无法像往常一样从脚本中显示/隐藏此div，因为显示屏上很重要：没有重要;D-*的定义。
使用 jQuery 的 show/hide/toggle 不起作用，因为它不会覆盖 ！important。我(似乎)剩下 3 个选择。
- 将div 保留在呈现的 HTML 中，然后在文档加载中将其隐藏 或
- 使用 jQuery(或类似的)add/remove Class 函数来添加或删除 d-none。 或
- 在我自己的样式表中定义一个 .hidden 类，使显示像 BS3 一样工作。
这两种选择似乎都不是很好。两者似乎都在使一个框架与另一个框架抗争。我错过了什么吗？我喜欢 BS4 显示类，但我无法想象除了添加或删除它们之外没有更好的方法来切换它们，如果有多个类用于响应能力，这可能会变得乏味。
以下是我页面相关部分的示例：
.HTML：
<html>
<body style="margin:20px;">
<form action="">
<input type="radio" name="cotype" id="1" value="D"> <label for="1">Distributor</label><br />
<input type="radio" name="cotype" id="2" value="ID"> <label for="2">Intl Distributor</label><br />
<input type="radio" name="cotype" id="3" value="S"> <label for="3">Supplier</label><br />
<input type="radio" name="cotype" id="4" value="IS"> <label for="4">Intl Supplier</label><br />
<br />
<div id="messagewrapper" class="hidden">
This should show for domestic companies.
</div>
</form>
</body>
</html>
Javascript：
function updateMessage() {
var cotype = $('input[name=cotype]:checked').val();
var message = $('#messagewrapper');
if (cotype === 'D' || cotype === 'S'){
message.show();
} else {
message.hide();
}
}
$(document).ready(function() {
$('input').on('change', updateMessage);
});
这是一个JSFiddle。如果您选择国内公司类型，则应显示一条消息。
应该调用该函数看起来像
function updateMessage() {
var cotype = $('input[name=cotype]:checked').val();
var message = $('#messagewrapper');
if (cotype === 'D' || cotype === 'S'){
message.addClass('custom-show');
} else {
message.removeClass('custom-show');
}
}
$(document).ready(function() {
$('#messagewrapper').hide();
$('input').on('change', function (){
updateMessage();
});
});
CSS
.custom-show{display:block !important;}
https://jsfiddle.net/6j08ouk4/30/