带有AngularJS的Twitter Bootstrap Navbar-折叠不起作用 [英] Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning

问题描述

我正在使用Angular和Twitter Bootstrap导航栏，并尝试使折叠功能正常工作.

I am using Angular and Twitter Bootstrap navbar and trying to get the collapse functionality to work.

部分:program.html

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

部分: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 -->

导航栏显示完美.下拉菜单效果很好. Angular函数加载数据并将特定项目标记为活动状态，并完美填充模型.唯一不起作用的是响应折叠功能.调整屏幕大小时，菜单项消失，并且出现菜单图标，但是单击它不起作用.我对此固执己见，我知道它必须是一个简单的修复程序，但我无法弄清楚.任何帮助将不胜感激！

The navbar displays perfectly. The dropdowns work great. The Angular functions load the data and mark the specific items as active and populate 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 work. 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!

推荐答案

这是一个棘手的问题.该文档显示了一种方法，并且功能强大.我复制了文档示例( http://twitter.github.com/bootstrap/components.html #navbar )并尝试使用它.然后，我转到示例页面并尝试了此处列出的布局: 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

唯一的区别是<button>而不是<a>

<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

EDIT

仲裁器指出<a />缺少href='#'属性.添加该属性也可以解决该问题.

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

这篇关于带有AngularJS的Twitter Bootstrap Navbar-折叠不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！