Bootstrap Nav Bar移动扩展按钮不起作用

Question

所以我正在使用这个bootstrap导航栏。 当调整宽度时，窗口大约在767px左右，它会占用所有导航栏链接并显示一个展开按钮。 主要面向移动用户。 这是正确的行为，也是我所期待的。

但是当点击新的移动扩展按钮时没有任何反应。 我想要它展开并显示一个菜单，其中包含导航栏中删除的所有链接。 例如这个页面 。 当调整窗口宽度的大小时，它会创建该按钮并且可以单击。 这就是我想要实现的目标。

我在这里创建了一个codepen 。 我还在下面列出了一小段代码。 但是， codepen提供了一个更好的交互式示例。 我有什么想法，以及为什么扩展按钮不可点击？

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" 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="#">My App</a>
</div>

Answer 1

data-target="#navigationbar"

应该指向您的导航菜单容器。

所以，在你的情况下，它应该是：

data-target="#bs-example-navbar-collapse-1"

Answer 2

您需要为下拉菜单加载jQuery库和Bootstrap JS库以在移动屏幕上工作。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>