无法在 Bluemix 部署的应用程序中展开折叠的导航栏

Question

我正在 bluemix 中部署一个非常简单的 node.js 应用程序。我正在使用 ejs 和 bootstrap 在顶部创建一个导航栏。它适用于我的本地代码版本，但是当我将它推送到 bluemix 并进行部署时，导航栏不会展开。有趣的是，浏览器看到的两个应用程序的源代码完全相同。这是代码：

<!-- views/pages/start.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
<!-- views/partials/head.ejs -->

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Some Title</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
    body    { position: relative; padding-top:50px; }
</style>

</head>

<body class="container" data-spy="scroll" data-target=".navbar" data-offset="50">

<header>
<!-- views//partials/header.ejs -->


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Website</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
</header>

Answer 1

当您在 Bluemix 中加载您的应用程序时，您的浏览器是否会在地址栏中显示 "shield" 图标？如果是这样，您可能会运行进入 mixed content blocking。这基本上意味着当网站的其余部分通过 HTTPS 提供服务时，浏览器拒绝运行通过 HTTP 提供的外部内容。

最简单的修复方法是将您的外部资源更改为所有 https:// URLs:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

为了安全起见，您也应该始终使用它的 https:// URL 加载您的 Bluemix 应用程序。

无法在 Bluemix 部署的应用程序中展开折叠的导航栏

Unable to expand collapsed navbar in Bluemix deployed app

ejs

node.js

twitter-bootstrap

ibm-cloud