响应式下拉导航栏,带有angular-ui引导程序(以正确的角度方式完成)


76

我使用angular-ui-boostrap的模块“ ui.bootstrap.dropdownToggle”创建了带有下拉导航栏的JSFiddle:http : //jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

据我了解,这是实施此类下拉菜单的正确方法。就angularjs而言,“错误”方式将包括bootstrap.js并使用“ data-toggle =“ dropdown” ...我在这里吗?

现在,我想像下面的小提琴一样向我的导航栏添加响应行为:http : //jsfiddle.net/ghtC9/6/

但是,我不喜欢上述解决方案。这个家伙包括bootstrap.js!

那么向我现有的导航栏添加响应行为的正确角度方式是什么?

我显然需要使用引导响应的navbar类,例如“ nav-collapse折叠navbar-响应-折叠”。可是我不知道

非常感谢您的帮助!

先感谢您!麦可

Answers:


57

您可以使用“折叠”指令进行此操作:http : //jsfiddle.net/iscrow/Es4L3/ (选中HTML中的两个“注释”)。

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

也就是说,您需要将折叠状态存储在变量中,并通过(简单地)更改该变量的值来更改折叠状态。


版本0.14uib-向组件添加了前缀:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

更改collapseuib-collapse


3
看来这并不能直接回答这个问题-他在谈论导航栏中的下拉按钮,而您正在谈论折叠整个导航栏。我想念什么吗?
PW Kad

谢谢,我花了很多时间试图弄清楚为什么一个简单的可折叠菜单无法正常工作
Ignacio Vazquez 2016年

就个人而言,我不认为uib崩溃是导航栏的错误方法。我宁愿使用uib-dropdown。
jae.phoenix

123

更新2015-06

根据antoinepairet的评论/示例

usinguib-collapse属性提供动画:http : //plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <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="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

古..

我看到问题围绕BS2展开,但我认为我会根据ui.bootstrap问题394中的建议使用ng-class解决方案提供Bootstrap 3解决方案:

官方引导程序示例的唯一变化是添加了ng-以下注释中指出的属性:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <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="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">

    <ul class="nav navbar-nav">
    ...

这是一个更新的工作示例:http : //plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview(帽子提示Lars)

在简单的用例中,这似乎对我有用,但是在示例中您会注意到第二个下拉列表被剪掉了……祝您好运!


18
而不是ng-class,您应该使用'collapse =“ navCollapsed”'。因为您的版本没有任何动画效果
bernhardh 2014年

6
另一个改进:将ng-click =“ navCollapsed = true”添加到代码段的最后一个div,以便在选中某个项目后下拉菜单折叠。
拉尔斯·本克

1
@streetlogics应该是“ navCollapsed”,您错过了那里的“ d”
PSWai 2014年

6
我没有及时编辑,但我更改<div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}"><div collapse="navCollapsed">,过渡成功了!
edhedges

1
我必须在这里丢失一些东西,但是鉴于navbar-toggle隐藏,此解决方案是否不会导致菜单的桌面版本被折叠且无法查看?即使有评论的更新,情况依然如此。

8

不知道是否有人遇到相同的响应问题,但这对我来说只是一个简单的CSS解决方案。

相同的例子

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}

3
您应该在.collapse选择器前添加导航ID,以免它破坏页面中的每次折叠
NiloVelez 2014年

1

我对带有angular-ui引导程序的响应/下拉导航栏的选择(当更新到angular 1.5和ui-bootrap 1.2.1时)
index.html

     ...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.