我在所有页面（包括index.html等）上创建了一个带有jQuery嵌入公共header.html文件的项目
我在其中添加了 Bootstrap。现在，header.html 中的下拉菜单工作正常；但不在其他页面上（包含 header.html）
此外，即使菜单切换也无法正常工作（它不会返回）。我已经尝试了所有方法来解决这个问题，但没有任何好处。
使用 jQuery 添加的头文件不支持 Bootstrap 菜单中的 DropDown 吗？
header.html <!DOCTYPE html>
<html>
<head>
<title>The Best Learning Website</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-control" content="max-age=600, public">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- <link href="data:text/css;charset=utf-8," data-href="css/bootstrap-theme.min.css" rel="stylesheet"
id="bs-theme-stylesheet" /> -->
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
<script>
$(window).scroll(function () {
var y = $(this).scrollTop();
var x = $(this).scrollLeft();
$('#blurry').css('background-position', parseInt(-x) + 'px ' + parseInt(-y) + 'px');
});
</script>
<style>
.inarow{ margin: 0 auto; }
.logo{ width: 15%; height:140px; margin:1% auto; padding:0%; }
</style>
</head>
<body>
<!-- nav -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<br/>
<!--header -->
<div class="row">
<div class="col-lg-3"> <img alt="SP Logo" src="images/SS-Training-Center-sp-white.png" > </div>
<div class="col-lg-6" class="shadow">
<h1>
<span style="color:green;font-weight:bold;">SP</span>
<span style="color:#053d63;font-weight:bold;">- A Complete solution pad for all your</span>
<span style="color:#e00000;font-weight:bold;">Problems</span>
<span>!</span>
</h1>
</div>
<div class="col-lg-3"> <img alt="Solution Pad" src="images/sp-pad-logo-white.png"> </div>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="what-we-do.html">What We Do</a></li>
<li><a href="who-we-are.html">Who We Are</a></li>
<!-- <li><a href="see-my-work-here.html">My Work</a></li> -->
<li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Free Stuffs</a>
<ul class="dropdown-menu" role="menu">
<li tabindex="-1"><a href="study-problems-and-issues.html">Study Problems?</a></li>
<li tabindex="-1"><a href="study-problems-and-issues.html">Learning Inabilities?</a></li>
<li>Study Depression</li>
<li>More Stuffs Coming Soon! Plz Stay Connected!</li>
</ul>
</li>
<li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Need Help ?</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Get Yourself Trained</a></li>
<li><a href="#">Provide us Feedback ONLINE</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="docs/For-Institutions.doc">Download Training Request Offline</a></li>
<li><a href="docs/To-Institutions.doc">Download Training Quotation Offline</a></li>
<li><a href="docs/Feedback-Form.doc">Download Offline Feedback Form</a></li>
<li><a href="training-modules.html">Our Training Modules</a></li>
<li><a href="sp-flash.html">ss-flash</a></li>
<li><a href="ss-youtube.html">ss-youtube</a></li>
<li><a href="mahavaani-hindi.html">mahavaani hindi</a></li>
<li><a href="inspirational-quotes-english.html">inspirational Quotes</a></li>
<li><a href="motivational-speeches.html">motivational-speeches</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
index.html<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-control" content="max-age=600, public">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- <link href="data:text/css;charset=utf-8," data-href="css/bootstrap-theme.min.css" rel="stylesheet"
id="bs-theme-stylesheet" /> -->
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
<style>
#wrapPad{
border-radius: 10px;
border: solid thick #9f9f9f;
border-left: outset;
border-right: ridge;
border-top: ridge;
border-bottom: inset;
background-color:#e6e6e6; /* or #efeded , #c1cdcd , ffe4c4 , #eeeeee , #c1cdc1 , #e6e6e6 , #cccccc , */
text-align: center;
/* <shadow> = inset? && [ <length>{2,4} && color? ] */
box-shadow: 3px 30px 70px 5px #05f;
/* shadows of right, bottom; glow of box, color of border of box */
padding: 3%;
vertical-align:middle;
}
#wrapScreen{
background-color:#1f1f1f;
text-align: center;
/* <shadow> = inset? && [ <length>{2,4} && color? ] */
box-shadow: -1px -1px 1px 2px black;
/* shadows of right, bottom; glow of box, color of border of box */
margin: 0 auto;
padding:0%;
}
.icons{ border: none; /* list-style: none; margin:0 auto; float:left; */ }
.contact{ text-align: center; }
</style>
<script>
$(function(){
$("#includedContent").load("header.html");
});
</script>
<script>
$(function(){
$("#footerDiv").load("footer.html");
});
</script>
</head>
<body>
<div class="container">
<!-- Nav -->
<div id="includedContent"></div>
<br />
<div class="row">
<div class="row" id="wrapPad">
<div id="wrapScreen" class="row" class="img-responsive">
<div class="col-lg-8 col-md-8">
<img src="images/pic01.jpg" alt="Solution Pad to your Problems" title="Solution Pad to your Problems"
name="slide" style="border:0px;width:80%;height:70%;" />
</div>
<div class="col-lg-4 col-md-4" class="headingImg">
<h2 id="headingImg">head of img descr</h2>
<p id="TextImg">text para</p>
</div>
</div>
<br />
<div class="inarow" id="buttons3">
<a href="http://yourgrowth.in/contact-us.html">
<div id="btnMain"> <div id="btnMainBtn">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> </div>
</a>
</div>
</div>
</div>
</div>
<br/>
<div id="footerDiv"></div>
<br/>
</body>
</html>
再一个html文件代码
<!DOCTYPE html>
<html>
<head>
<title>SP - The Page is Not Available</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-control" content="max-age=600, public">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- <link href="data:text/css;charset=utf-8," data-href="css/bootstrap-theme.min.css" rel="stylesheet"
id="bs-theme-stylesheet" /> -->
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
<script>
$(function(){
$("#includedContent").load("header.html");
});
</script>
</head>
<body>
<div class="container">
<!-- Nav -->
<div id="includedContent"></div>
<br />
<div class="row">
<div class="col-lg-12 col-md-12">
<h1>Sorry, the page you visited is not Found!</h1>
<br />
<h2>The Possible causes of this error you see, may be either of the following:</h2>
<p>The Web Page you are looking for is not available or is MISSPELLED!</p>
<p>This Site is under maintenance for now...!</p>
<p>Also, Check for the Internet Connection.</p>
<h4> Make Sure, you add .html at Last of each page you wish to visit Directly (via URL)</h4>
<br />
</div>
</div>
<section>
Return to Homepage
</section>
</div>
</body>
</html>
我几个月前就解决了这个问题！
要解决此类问题，您必须记住以下几点：
最重要的是；在每个子菜单项中，确保添加 class="dropdown-menu" 和 role="menu" 属性，如下所示：
<li id="Phf"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Problems? ⇩</a>
<ul class="dropdown-menu" role="menu" style="color:red">
<li><a href="study-problems-and-issues.html">Study problems & non-interests</a></li>
<li><a href="#">Poor Learning ability</a></li>
<li><a href="why-my-memory-is-so-weak.html">Is MEMORY too WEAK?</a></li>
<li><a href="why-my-memory-is-so-weak.html">Lack of Concentration</a></li
<li><a href="#">Unable to Perform your work well?</a></li>
<li><a href="#">Poor Work Performance</a></li>
<li><a href="why-life-is-such-painful-depressed-lazy-joyless-and-unhappy.html">Depressed or Unhappy Life</a></li>
<li><a href="#">Parenting Failures</a></li>
</ul>
</li>
从 header.html/footer.html 中删除 bootstrap.min.css,jQuery.min.js,bootstrap.min.js 以及其他已添加到父 html(index.html/jsp) 中的相关 java 脚本和 css 文件文件