Question

不知道我的代码中缺少什么。当我缩小尺寸时，会显示3个条形，但是当我点击它们时，它们不会切换菜单。

<!DOCTYPE html>
<html>
<head>
    <title>Prototype</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">  
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-  target="#main-nav">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Brand</a>
            </div>

            <!-- Collect nav links, forms, and other content into div for toggle -->
            <div class="collapse navbar-collapse" id="main-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    </nav> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

这是jsfiddle上的代码：http://jsfiddle.net/5SBqQ/

Answer 1

Bootstrap需要jQuery。添加：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

在添加bootstrap之前应该解决问题。

http://jsfiddle.net/4LWQv/2/（删除了jsfiddle的脚本和链接标记）

当我点击它时，为什么我的可折叠菜单不会扩展？

1 个答案: