问题描述
我在该站点中使用引导程序3（https://dylantn.github.io/Dusic/）创建了一个测试站点，汉堡菜单不起作用，但是当我打开本地文件时，汉堡菜单起作用，任何人都可以找到对您有用的东西吗？这个具体问题
<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1 maximum-scale=1 user-scalable=no" charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="ind.css">
<title>Dusic-The Free Music Player Worldwide.</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only"><font face="arial"></font>Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><font face="arial"><span class="navimg"><img src="dusic4.gif" width="80" length="80" alt=""></span></font></a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#"><font face="arial">About</font></a></li>
<li><a href="#"><font face="arial">Contact</font></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><font face="arial">Sign Up</font></a></li>
<li><a href="#"><font face="arial">Login</font></a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1><b><a href="#"><img src="dusic4.gif" width="250" length="250"></a></b></h1>
<h3><b>The Best Collection of Music That Ain't Worldwide...... MAN</b></h3>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>What is the purpose of Dusic?</h1>
<p>Our Society already has many music players,but i thought we need another one to clutter your life,plus it is Free!!</p>
<br><h3>IT IS FREE!! THAT IS THE ONLY COOL FEATURE ABOUT THIS THAT SEPERATES THIS FROM EVERYTHING ELSE<br>YIPEEEEE!</h3>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
解决方法
这似乎是jquery的问题，它说阻止加载混合的活动内容。
我从以下问题得到了这个答案：Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox?
什么是混合内容？
当用户访问通过HTTP服务的页面时，他们的连接将打开以进行窃听和中间人（MITM）攻击。当用户访问通过HTTPS服务的页面时，他们与Web服务器的连接将通过SSL进行身份验证和加密，因此可以防止窃听和MITM攻击。
但是，如果HTTPS页面包含HTTP内容，则即使主页面通过HTTPS提供服务，攻击者也可以读取或修改HTTP部分。当HTTPS页面包含HTTP内容时，我们称该内容为“混合”。用户访问的网页仅被部分加密，因为某些内容是通过HTTP未加密地检索的。混合内容阻止程序会阻止HTTPS页面上的某些HTTP请求。
在我的情况下，解决方案是仅确保jquery包含以下内容（注意删除协议）：
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css" type="text/css">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
请注意，临时的“修复”方法是单击地址栏左上角的“屏蔽”图标，然后选择“在此页面上禁用保护”，尽管出于明显原因不建议这样做。
更新：Firefox（Mozilla）支持页面上的此链接也可用于解释什么构成混合内容，并且如上段所述，实际上提供了如何显示页面的详细信息，无论如何：
大多数网站将继续正常运行，而无需您采取任何行动。
如果需要允许显示混合内容，则可以轻松做到这一点：
点击地址栏中的屏蔽图标“混合内容屏蔽”，然后从下拉菜单中选择“禁用此页面上的保护”。
地址栏中的图标将变为橙色的警告三角警告标识图标，以提醒您正在显示不安全的内容。
要恢复上一个操作（重新阻止混合内容），只需重新加载页面即可。
链接到此帖子：https://blog.mozilla.org/tanvi/2013/04/10/mixed-content-blocking-enabled-in-firefox-23/
通过我尝试您在上面发布的代码并将其复制到codepen中并运行它的方式，效果很好。