Question

我正在开发一个带有3个回退的样板：jQuery，Bootstrap.js和Bootstrap.css。前2个工作正常，但我无法使css后备正常工作（我正在使用此引用：Should I use Bootstrap from CDN or make a copy on my server?）

这是标记：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title></title>
      <meta name="description" content="" />
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/{{BOOTSTRAP_VERSION}}/css/bootstrap.min.css" rel="stylesheet" integrity="{{BOOTSTRAP_SRI_HASH}}" crossorigin="anonymous">
      <link rel="stylesheet" href="css/main.min.css" />
  </head>
  <body>
      <h1>Hello World!</h1>
  </body>
  <script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery/dist/jquery/jquery.min.js"><\/script>')
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/{{BOOTSTRAP_VERSION}}/js/bootstrap.min.js" integrity="{{BOOTSTRAP_SRI_HASH}}" crossorigin="anonymous"></script>
  <div class="hidden" id="bootstrapCssTest"></div>
  <script>
    if (typeof($.fn.modal) === 'undefined') {
        document.write('<script src="/js/vendor/bootstrap/dist/js/bootstrap.min.js"><\/script>');
    }
  </script>
  <script>
    $(function() {
        if ($('#bootstrapCssTest').is('visible')) {
            $('head').prepend('<link rel="stylesheet" href="/js/vendor/bootstrap/dist/css/bootstrap.min.css">');
        }
    });
  </script>
  <script src="js/bundle.min.js"></script>
</html>

Answer 1

您错误输入了选择器。您需要:visible，而不是visible

$(function() {
  if ($('#bootstrapCssTest').is(':visible')) {
    $('head').prepend('<link rel="stylesheet" href="/js/vendor/bootstrap/dist/css/bootstrap.min.css">');
  }
})

Bootstrap CSS后备无法正常工作

1 个答案: