下面链接的代码在我的桌面上的Chrome中运行良好，但是当我的手机上显示时，甚至没有出现"会议"下拉菜单。
请访问 https://jsfiddle.net/Spleendrivel/mg3upjqh/以查看代码示例。
我真的没有更多细节可以提供，有趣的是，当我将 css 和 js 代码分离到 jsfiddle 上的相应窗口中时，它似乎中断了......
<!doctype html>
<html>
<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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: url(images/SandyBackground.jpg) repeat
}
@media screen and (max-width: 2400px) {
body {
font-size: 2vw;
color: black;
}
}
@media screen and (max-width: 900px) {
body {
font-size: 1.8vw;
color: black;
}
}
.hidden {
display:none;
}
svg text {
font-family: FontAwesome;
}
.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
td {
padding:0 5px 0 5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="CloseAll();">Meetings</a>
<ul class="dropdown-menu">
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleMonMeetings();">Monday</a></li>
<li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleTueMeetings();">Tuesday</a></li>
<li class="menu-item "><a class="dropdown-item" onclick="toggleCommitteeMeetings();" href="#">Committee Meetings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="MonMeetingsContent" style="display:none" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table cellpadding="3" cellspacing="3" width="100%">
<col style="width:9%">
<col style="width:9%">
<col style="width:30%">
<col style="width:35%">
<col style="width:13%">
<thead>
<tr>
<th>MONDAY</th>
<th>Time</th>
<th>Description</th>
<th>Where</th>
<th>Map Link</th>
</tr>
</thead>
<tbody>
<tr height="2" bgcolor="#222222">
<td colspan="5"> </td>
</tr>
<tr bgcolor="#BDBDBD" id="Font75">
<td style="text-align:left"><B>MON</B></td>
<td style="text-align:left">5:30p</td>
<td style="text-align:left">A NEW LIGHT (D H JFT O No Children Allowed)</td>
<td style="text-align:left">Step One Coffee House, 6719 E. 2nd Street, Suite A, Prescott Valley</td>
<td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.579271,-112.348131">MAP</a></td>
</tr>
<tr bgcolor="#DEDEDE" id="Font75">
<td > </td>
<td style="text-align:left">7:00p</td>
<td style="text-align:left">LOST AND FOUND (D LC O)</td>
<td style="text-align:left">Safe Harbor, 520 Delano St., Prescott</td>
<td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.572087,-112.471348">MAP</a></td>
</tr>
<tr height="4" bgcolor="#000000">
<td colspan="5"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="TueMeetingsContent" style="display:none" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table cellpadding="3" cellspacing="3" width="100%">
<col style="width:9%">
<col style="width:9%">
<col style="width:30%">
<col style="width:35%">
<col style="width:13%">
<thead>
<tr>
<th>TUESDAY</th>
<th>Time</th>
<th>Description</th>
<th>Where</th>
<th>Map Link</th>
</tr>
</thead>
<tbody>
<tr height="2" bgcolor="#222222">
<td colspan="5"> </td>
</tr>
<tr bgcolor="#BDBDBD" id="Font75">
<td style="text-align:left"><B>TUE</B></td>
<td style="text-align:left">Noon</td>
<td style="text-align:left">LUNAR NOONER (D JFT O)</td>
<td style="text-align:left">635 N. 1st Street, Treehouse Learning Community Center, Prescott</td>
<td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.552718,-112.471647">MAP</a></td>
</tr>
<tr bgcolor="#DEDEDE" id="Font75">
<td > </td>
<td style="text-align:left">7:00p</td>
<td style="text-align:left">LOST AND FOUND (D H JFT O)</td>
<td style="text-align:left">Safe Harbor, 520 Delano St., Prescott</td>
<td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.572087,-112.471348">MAP</a></td>
</tr>
<tr bgcolor="#CDCDCD" id="Font75">
<td > </td>
<td style="text-align:left">7:30p</td>
<td style="text-align:left">GRATITUDE TOO GROUP (D H JFT NC O)</td>
<td style="text-align:left">Step One Coffee House, 6719 E. 2nd Street, Suite A, Prescott Valley</td>
<td style="text-align:left"><a target="_blank" href="https://maps.google.com/maps?q=34.579271,-112.348131">MAP</a></td>
</tr>
<tr height="4" bgcolor="#000000">
<td colspan="5"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="CommitteeMeetingsContent" style="display:none" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table cellpadding="3" cellspacing="3" width="100%">
<col style="width:9%">
<col style="width:16%">
<col style="width:31%">
<col style="width:44%">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>What</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr height="4" bgcolor="#000000">
<td colspan="4"> </td>
</tr>
<tr bgcolor="#BDBDBD" id="Font75">
<td style="text-align:left"><b>1<sup>st</sup> SUN</b></td>
<td style="text-align:left">05-06-2018 12:30pm</td>
<td style="text-align:left">Activities SubCommittee</td>
<td style="text-align:left">Frozen Frannies, 104 W. Gurley St., Prescott <a target="_blank" href="https://maps.google.com/maps?q=34.542005, -112.469079">MAP</a></td>
</tr>
<tr bgcolor="#DFDFDF" id="Font75">
<td style="text-align:left"><b>2<sup>nd</sup> SAT</b></td>
<td style="text-align:left">05-12-2018 12:30pm</td>
<td style="text-align:left">H&I SubCommittee</td>
<td style="text-align:left">Step One Coffee House, 6719 E. 2nd Street, Suite B, Prescott Valley <a target="_blank" href="https://maps.google.com/maps?q=34.579301,-112.348046">MAP</a></td>
</tr>
<tr bgcolor="#BDBDBD" id="Font75">
<td style="text-align:left"><b>2<sup>nd</sup> SUN</b></td>
<td style="text-align:left">05-13-2018 10:00am</td>
<td style="text-align:left">Yavapai Area Service Committee (YASC)</td>
<td style="text-align:left">Step One Coffee House, 6719 E. 2nd Street, Suite B, Prescott Valley <a target="_blank" href="https://maps.google.com/maps?q=34.579301,-112.348046">MAP</a></td>
</tr>
<tr bgcolor="#DFDFDF" id="Font75">
<td style="text-align:left"><b>3<sup>rd</sup> WED</b></td>
<td style="text-align:left">05-18-2018 5:30pm</td>
<td style="text-align:left">PR SubCommittee</td>
<td style="text-align:left">Panera Bread, 3065 Gateway Blvd, Prescott <a target="_blank" href="https://maps.google.com/maps?q=34.551229, -112.412528">MAP</a></td>
</tr>
<tr height="4" bgcolor="#000000">
<td colspan="4"> </td>
</tr>
</tbody>
</table>
</div>
<!-- Latest compiled and minified JQuery code -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Latest compiled and minified BootStrap Code -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script>
function toggleMonMeetings() {
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
else
MonMeetingsContent.style.display = 'block';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleTueMeetings() {
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
else
TueMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
}
function toggleCommitteeMeetings() {
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
else
CommitteeMeetingsContent.style.display = 'block';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
}
function CloseAll() {
if (CommitteeMeetingsContent.style.display == 'block')
CommitteeMeetingsContent.style.display = 'none';
if (MonMeetingsContent.style.display == 'block')
MonMeetingsContent.style.display = 'none';
if (TueMeetingsContent.style.display == 'block')
TueMeetingsContent.style.display = 'none';
}
</script>
</body>
</html>
这是因为引导类折叠隐藏了导航栏并替换为右上角的按钮。只有单击该按钮时，导航栏才会再次显示。您的代码没有该按钮。
由于您使用的是 Bootstrap 3，因此折叠按钮应如下所示
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
以下是修订后的代码： https://jsfiddle.net/awran5/um591sgj/