为什么当我点击可折叠菜单时，它没有展开?

Why doesn't my collapsible menu expand when I click on it?

本文关键字：菜单 可折叠 为什么      更新时间：2023-09-26

不知道我的代码缺少什么。当我缩小尺寸时，这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/

Bootstrap需要jQuery。添加:

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

在添加bootstrap之前应该可以解决这个问题。

http://jsfiddle.net/4LWQv/2/(删除了jsfiddle的脚本和链接标签)

相关文章：