我正在开发一个网站，并在我的iPhone上进行移动视图测试。还在bootstrap 3。它有一些问题。当点击我iPhone上的导航按钮时，没有发生任何下拉列表。当在桌面上时，它可以用鼠标点击。最重要的是，我使用JS将此页面加载到index.jsp。谢谢。
$(document).ready(function () {
console.log("testing");
$('#header').load('jsp/Header.jsp');
$('#footer').load('jsp/Footer.jsp');});
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; 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">
<title>nav</title>
</head>
<body>
<div class="col-sm-2" id="nav">
<sec:authorize access="hasRole('ROLE_USER')">
<a class="dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown">☰
<span class="caret"></span></a>
<ul class="dropdown-menu" id="dropdown">
<li>
<div class="col-sm-2 align-top " id="home">
<a href="${pageContext.request.contextPath}/displayHomePage"><span class="glyphicon glyphicon-home"></span></a>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="home">
<a href="${pageContext.request.contextPath}/displayAboutUsPage"> About Us</a>
</div>
</li>
<li> <div class="col-sm-2 align-top " id="news">
<a href="${pageContext.request.contextPath}/displayNewsFeedPage">News</a>
</div></li>
<li><div class="col-sm-2 align-top " id="blog">
<a href="${pageContext.request.contextPath}/displayNewPostPage">Posts</a>
</div></li>
<li>
<div class="col-sm-2 align-top " id="home">
<a href="${pageContext.request.contextPath}/displayRegistrationForm">sign up</a>
</div>
</li>
<li> <div class="col-sm-2 align-top " id="log-in">
<a href="${pageContext.request.contextPath}/">Sign In</a>
</div></a></li>
</ul>
</sec:authorize>
</div>
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/Home.js"></script>
答案 0 :(得分：0)
您应该在头部使用js和jQuery，如下所示：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>nav</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/Home.js"></script>
</head>
<body>
<div class="col-sm-2" id="nav">
<sec:authorize access="hasRole('ROLE_USER')">
<a class="dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown">☰
<span class="caret"></span></a>
<ul class="dropdown-menu" id="dropdown">
<li>
<div class="col-sm-2 align-top " id="home">
<a href="${pageContext.request.contextPath}/displayHomePage"><span class="glyphicon glyphicon-home"></span></a>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="home">
<a href="${pageContext.request.contextPath}/displayAboutUsPage"> About Us</a>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="news">
<a href="${pageContext.request.contextPath}/displayNewsFeedPage">News</a>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="blog">
<a href="${pageContext.request.contextPath}/displayNewPostPage">Posts</a>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="home">
<a href="${pageContext.request.contextPath}/displayRegistrationForm">sign up</a>
</div>
</li>
<li>
<div class="col-sm-2 align-top " id="log-in">
<a href="${pageContext.request.contextPath}/">Sign In</a>
</div>
</a>
</li>
</ul>
</sec:authorize>
</div>
因为我多次遇到同样的问题所以希望它有效。
答案 1 :(得分：0)
试试这个
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<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="${pageContext.request.contextPath}/">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<sec:authorize access="hasRole('ROLE_USER')">
<ul class="nav navbar-nav">
<li class="active"><a href="${pageContext.request.contextPath}/home">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="${pageContext.request.contextPath}/page2">Page 2</a></li>
<li><a href="${pageContext.request.contextPath}/page3">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="${pageContext.request.contextPath}/signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="${pageContext.request.contextPath}/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</sec:authorize>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
</div>
</body>
</html>