Twitter的引导与导览列角JS - 崩溃不能正常工作 [英] Twitter Bootstrap Navbar with Angular JS - Collapse not functioning

问题描述

我使用的角度和Twitter的引导的导航栏，并试图让崩溃的功能工作。这里是code我使用的：

I am using Angular and Twitter Bootstrap nav bar and trying to get the collapse functionality to work. Here is the code I am using:

部分：program.html

Partial: program.html

<div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div>

和部分：navbar.html

And the Partial: navbar.html

<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="dropdown ng-class: settingsActive;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a onclick='$("#myModal").modal("show");'>User Info</a></li>
                        <li><a href="#/setup">Settings</a></li>
                        <li><a href="#/get-started">Getting started</a></li>
                    </ul>
                </li>
                <li class="dropdown ng-class: programActive;" ng-controller="ProgramCtrl">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lessons <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li ng-repeat='o in lessonTypes'>
                            <a href="#/program/{{o.value}}">{{o.title}}</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#/freeform">Free Form</a></li>
                    </ul>
                </li>
                <li class="dropdown ng-class: reportsActive;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Grades <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Simple Report</a></li>
                        <li><a href="#">Comprehensive Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Current Grade Report</a></li>
                        <li><a href="#">Final Grade Report</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a></li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div>
</div><!-- /navbar-inner -->

导航栏显示完美。在下拉菜单的工作太棒了。的角度的函数加载数据和模型完美标记特定的项目，如活性和流行。不工作的唯一的事情就是响应折叠功能。当我调整屏幕，菜单项消失，出现菜单中的图标，但点击它不起作用。我被困在这，我知道它必须是一个简单的解决，但我就是无法弄清楚。任何帮助将是AP preciated！

The navbar displays perfect. The drop downs work great. The Angular functions load the data and mark the specific items as active and popular the models perfectly. The only thing that doesn't work is the Responsive Collapse feature. When I resize the screen, the menu items disappear and the icon for the menu appears, but clicking on it does not function. I am stuck on this and I know it has to be a simple fix, but I just can't figure it out. Any help would be appreciated!

推荐答案

这是一个棘手的一个。该文档显示的一种方式，它的作用很大。我复制的文档示例（<一个href=\"http://twitter.github.com/bootstrap/components.html#navbar\">http://twitter.github.com/bootstrap/components.html#navbar) ，并用它尝试了我后来去了范例页面，并试图在这里列出的布局：<一href=\"http://twitter.github.com/bootstrap/examples/fluid.html\">http://twitter.github.com/bootstrap/examples/fluid.html

This was a tricky one. The docs showed one way, and it functions great. I copied the docs example (http://twitter.github.com/bootstrap/components.html#navbar) and tried using it. I then went to the examples page and tried the layout listed here: http://twitter.github.com/bootstrap/examples/fluid.html

的唯一区别是＆LT;按钮＆GT; 而不是＆LT; A＆GT;

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

而不是

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

我不知道为什么，但改变，使得它的作用很大。

I don't know why, but changing that made it function great.

的 修改的

EDIT

仲裁指出，＆LT; A /＆GT; 失踪的的href ='＃'属性。添加该属性也将解决这个问题。

Arbiter pointed out that the <a /> was missing the href='#' attribute. Adding that attribute would also solve the problem.

这篇关于Twitter的引导与导览列角JS - 崩溃不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！