Bootstrap 中的 Javascript 元素不起作用

Question

我是引导程序的初学者。我尝试过导航栏、下拉菜单、模式、轮播等元素，但它们都不能正常工作。我猜，这是因为链接到它的 JS 文件。请帮助我在一个项目中需要这些元素。

谢谢。

<div class="navbar navbar-default">
    <div class="conatiner-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false">
                <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="#" id="navbarLogo">MyWebsite</a>
        </div>
        <div class="collapse navbar-collapse" id="#navbar-collapse1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Team</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">Youtube</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>          
</div>


<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script scr="js/bootstrap.min.js"></script>

Answer 1

这很好您有一些问题，大多数是@Rachel Gallen 指出的拼写错误，但您还将 navbar-collapse1 的 id 设置为其 css 选择器值。您应该将其设置为 id="navbar-collapse1"，添加 # 仅在对元素进行文档查询时使用。请查看此文档以了解有关选择器的更多信息https://api.jquery.com/category/selectors/

<html>
<body>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false">
                <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="#" id="navbarLogo">MyWebsite</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Team</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">Youtube</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>          
</div>
</body>
</html>