新手练习bootstarp的响应式导航栏，在小于一定宽度的时候确实响应

但是点击button却没有出现这个效果

以下为源代码，希望各位可以指出我哪里设置的不对

 <header role="banner">
            <nav role="navigation" class="navbar navbar-default">
              <p class="container">
                <p class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="index.html">一起看电影</a>
                </p>
                <p class="navbar-collapse collapse ">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">首页</a></li>
                    <li><a href="zixunyugao.html">资讯预告</a></li>
                    <li><a href="wangqihuigu.html">往期回顾</a></li>
                    <li><a href="ziyuanxiazai.html">资源下载</a></li>
                  </ul>
                </p><!--/.nav-collapse -->
              </p><!--/.container -->
            </nav>
        </header>
        

补充：1.F12看Network，bootstarp.min.css，jquery.min.js，bootstarp.min.js都有正确加载。
2.单独引入collapse.js也没有效果。
3.JS Bin：http://jsbin.com/zegibucona/edit?html