Question

切换导航栏的按钮将不起作用。我已经检查了类似问题的答案，并且看不出我的html有什么问题。非常感谢！

我可以看到导航栏中的所有li项目但无法隐藏它们。

这是相关的html：

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" id="home">Simmo Simpson</a>
        </div>

        <div class="pull-right">
        <ul class="nav navbar-nav">
            <li>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            </li>
        </ul>
        </div>

        <div id="#myNavbar" class="collapse navbar-collapse" >
        <ul class="nav navbar-nav pull-left">
            <li id="navbar" class="active"><a href="#home">Home</a></li>
            <li id="navbar" class="active"><a href="#about">About</a></li>
            <li id="navbar" class="active"><a href="#portfolio">Portfolio</a></li>
            <li id="navbar" class="active"><a href="#contact" >Contact</a></li>
        </ul>
        </div>
    </div>
</nav>

我也将它包含在底部（以及meta部分中的样式表等）：

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

首先，将type="text/javascript"添加到jquery / javascript包含的脚本标记中。

第三，根据“跨网站脚本”检查您的服务器/网站/浏览器配置。我相信这可能是你的问题。当您调用具有跨源的脚本时，您尝试远程执行脚本，出于安全考虑，默认情况下，许多网站和/或服务器都会禁用此脚本。为了解决这个问题，我建议下载引导程序CSS / JS文件，并将它们从您的站点主管中引用为CDN。

我也看到你遇到了一个问题，其中包括一个＆＃39;＃＆＃39;在元素id; <div id="#myNavbar" class="collapse navbar-collapse" > - 修复此代码后，代码停止工作，这是因为您可能没有更改引导程序切换按钮的目标ID，请参阅; <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">。

在这两行中，ID需要匹配，即要切换的导航栏元素的ID，以及执行切换的按钮。

导航栏不会切换

1 个答案: