Question

我在一个有20多个页面的网站上工作，每隔几个月就会更改一次。我决定制作一个脚本来加载每个页面上的导航栏，导航和页脚。

<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="../css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/myCss.css">
</head> 
<body>

<navbar></navbar>

<div id="nav"></div>

<div class="content"></div>

<footer></footer>

</body>
<script src="../js/loader.js"></script>
<script src="../js/bootstrap-dropdownhover.min.js"></script>
</html>

我正在使用loader.js加载导航栏，导航和页脚。

$(document).ready(function() {
    $("navbar").load("../pageFramework/navbar.html");
});

$(document).ready(function() {
    $("#nav").load("../pageFramework/navpills.html");
});

$(document).ready(function() {
    $("footer").load("../pageFramework/footer.html");
});

这样可以完美地加载所有页面，但是当我尝试悬停我的导航时，dropdownhover.min.js无法显示我的下拉菜单。当我将navbar html直接放在页面上并删除loader.js时，它可以很好地工作。

Answer 1

加载页眉/导航/页脚后，您需要重新初始化bootstrap;见Bootstrap Select - reinitialize on dynamically added element

Answer 2

您需要在bootstrap-dropdownhover.min.js的回调中加载load(navbar.html)。请参阅：https://api.jquery.com/jquery.getscript/

一页上有多个javascripts

2 个答案: