Question

我正在使用CDN bootstrap导航栏和可折叠按钮作为我正在开发的网站上所有页面的标题。代码如下。当这段代码是HTML文件的一部分时，一切都运行得很好。

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="http://<webaddress>/working/home.html">
                <img class="logo-main" src="images/logo.png">
            </a>
            <a class="navbar-brand" href="http://<webaddress>.com/working/home.html">
                <img class="name-main" src="images/name.png">
            </a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-button" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>                

        </div><!-- /.navbar-header -->

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-button">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home </a></li>
                <li><a href="http://<webaddress>/dining">Dining</a></li>
                <li><a href="http://<webaddress>/event-activities">Events & Activities</a></li>
                <li><a href="http://<webaddress>/private-party">Private Party</a></li>
                <li><a href="http://<webaddress>/gallery">Gallery</a></li>
                <li><a href="http://<webaddress>/media-contact">Media & Contact</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

由于此代码出现在顶部的许多网页上，我创建了一个包含所有jQuery，Bootstrap和CSS引用的header.html文件，并将上述代码复制到header.html，然后我在每个网页中添加了这些代码。的网页：

<head>
<script> 
    $(function(){
        $("#header").load("header.html"); 
        $("#footer").load("footer.html"); 
    });
</script> 
</head>

<body>

<div id="header"></div>

使用Jquery作为标题加载的相同代码，除了按钮之外，一切都工作正常。展开后，再次单击它不会折叠它。所有其他功能（如响应功能）的工作方式相同。但是，当相同的代码是单个网页的一部分时，按钮工作正常。代码有什么问题，我该如何解决？感谢。

当作为带有JQuery的头文件包含时，Bootstrap导航栏按钮不会折叠

0 个答案: