Question

我有一个div，页面加载被隐藏。使用BS4，我用d-none类完成了这个。这很有效，我确实理解BS4中的响应式显示类。我的问题是，我不能像往常一样显示/隐藏脚本，因为显示屏上的！important：none！important; d的定义 - *。

使用jQuery的show / hide / toggle不起作用，因为它不会覆盖！important。我（看似）有3个选项。

将div保留在呈现的HTML中，然后将其隐藏在文档加载中或
使用jQuery（或类似）添加/删除类函数来添加或删除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。如果您选择国内公司类型，则应显示一条消息。

Answer 1

应该调用函数看起来像

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/

使用Bootstrap 4的新显示类时，如何隐藏/显示脚本div

1 个答案: