Css 导航栏中的下拉菜单不适用于引导和角度_Css_Angularjs_Twitter Bootstrap

Css 导航栏中的下拉菜单不适用于引导和角度

css angularjs twitter-bootstrap

Css 导航栏中的下拉菜单不适用于引导和角度,css,angularjs,twitter-bootstrap,Css,Angularjs,Twitter Bootstrap,我正在学习角度和引导。我有一些由Yeoman生成的代码，我的导航栏中的正常链接工作正常。但是，下拉项不起作用（下拉项显示在导航栏中，但单击时不展开）。如您所见，我已将导航条形码放入视图本身有趣的是，当导航条形码在容器中时（例如index.html），它实际上可以工作我的问题是，为什么我的navbar代码在容器中工作良好的视图中不能按预期工作以下是视图中的导航条代码，导航条下拉列表不工作（需要注意的是，其他导航条项目似乎工作正常）：切换导航

我正在学习角度和引导。我有一些由Yeoman生成的代码，我的导航栏中的正常链接工作正常。但是，下拉项不起作用（下拉项显示在导航栏中，但单击时不展开）。如您所见，我已将导航条形码放入视图本身

有趣的是，当导航条形码在容器中时（例如index.html），它实际上可以工作

我的问题是，为什么我的navbar代码在容器中工作良好的视图中不能按预期工作

以下是视图中的导航条代码，导航条下拉列表不工作（需要注意的是，其他导航条项目似乎工作正常）：


切换导航























Allo，Allo



使用你的应用程序总是一种乐趣。


HTML5样板

HTML5样板是一个专业的前端模板，用于构建快速、健壮、适应性强的web应用程序或网站。

有棱角的

AngularJS是用于构建最适合应用程序开发的框架的工具集。

因果报应
出色的JavaScript测试运行程序
来自约曼队

这是Yoeman生成的容器（index.html）的代码。导航条形码应与上述相同

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="employerApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Putting this code back into the index does make the dropdown in the nav bar work -->

    <!-- <nav id="myNavbar" class="navbar navbar-default" role="navigation">
     <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Drafts</a></li>
                        <li><a href="#">Sent Items</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Trash</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle glyphicon glyphicon-user"> Admin <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Log out</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </li>
            </ul>
        </div>
      </div>
    </nav> -->

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>  
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <!-- endbuild -->
</body>
</html>


（函数（i，s，o，g，r，a，m）{i['GoogleAnalyticsObject']=r；i[r]=i[r]| |函数（）{
（i[r].q=i[r].q | |[]）.push（参数）}，i[r].l=1*新日期（）；a=s.createElement（o），
m=s.getElementsByTagName（o）[0]；a.async=1；a.src=g；m.parentNode.insertBefore（a，m）
})（窗口，文档，“脚本”，“www.google-analytics.com/analytics.js”，“ga”）；
ga（“创建”、“UA-XXXXX-X”）；
ga（‘发送’、‘页面浏览’）；

为了测试，我使用的是Chrome，我没有看到控制台出现任何错误。我使用的是bootstrap3

谢谢你的帮助

问候,，

Gaj

您可以尝试加强下拉切换和下拉菜单之间的关系。我认为jQuery首先查找数据父对象，然后再查找href来执行操作。将id添加到菜单并从“切换”指向它

<a data-parent="#messages-menu" href="#messages-menu" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
  <ul id="messages-menu" class="dropdown-menu">

我只想使用href（因为他们说每个锚点都应该有一个href）

我看不出你的导航条形码有问题。单击时，下拉列表会正确展开。Hi Shin，当您为angular.js应用程序将视图嵌入容器（例如，视图嵌入index.html中）时，它似乎不起作用。我试过Chrome和Safari。我不确定这是否与角度有关，但我怀疑可能是这样。谢谢

<a data-parent="#messages-menu" href="#messages-menu" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
  <ul id="messages-menu" class="dropdown-menu">