Question

汉堡包菜单不能正常使用我的代码。到目前为止我所有的都是带有Bootstrap 3.3.7链接的html文档，链接到jquery并链接到我自己的css和我自己的javascript，但到目前为止这些都没有。我究竟做错了什么？它工作得很好，然后它就没有了。它是链接的顺序，如Bootstrap链接和/或jquery链接？我错过了一个链接吗？我在导航栏中遗漏了什么吗？我直接从Bootstrap复制了它。我还想添加一个粘性页脚，但我害怕通过添加更多代码进一步搞砸。我是第一次编码器（仍然是训练营的学生），也是从Stackoverflow开始的。谢谢！

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <script type="text/javascript" src="assets/javascript/script.js"></script>
    <title>Telefunken Score Keeper</title>
    </head>
    <body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">
                        <img alt="Brand" src="...">
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
            </div> 
        </div>
    </nav>

    <div class="jumbotron">
        <div class="container">
            <h1>Telefunken ScoreKeeper</h1>
            <p>For the score-lovers.</p>
        </div>
    </div>

    </body>
    </html>

Answer 1

您必须包含引导程序JavaScript文件

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

<!DOCTYPE html>
<html lang="en-US">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<script type="text/javascript" src="assets/javascript/script.js"></script>
	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<title>Telefunken Score Keeper</title>
</head>

<body>

	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">
						<img alt="Brand" src="...">
					</a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
						</li>
						<li><a href="#">Link</a>
						</li>
						<li><a href="#">Link</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</nav>

	<div class="jumbotron">
		<div class="container">
			<h1>Telefunken ScoreKeeper</h1>
			<p>For the score-lovers.</p>
		</div>
	</div>

</body>

</html>

响应折叠菜单不起作用

1 个答案: