为什么这个下拉菜单填充工作链接？

我正在学习引导通过更改示例。我试图创建的下拉菜单应该有三个链接。主标签应链接到someroute，而通过下拉菜单显示的两个链接应分别让用户点击route3和route4。但是，应该有三个工作链接的是死链接。 需要对下面的代码进行哪些具体更改才能使菜单栏中的所有四个链接都能正常工作，包括下拉菜单中的三个链接？为什么这个下拉菜单填充工作链接？

这是a plnkr that recreates the problem including the code below。

这里的index.html，其中包括在下拉菜单中的引导代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
    <link href="style.css" rel="stylesheet"/> 
    <style type="text/css"> 
    [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; } 
    </style> 
    </head> 
    <body class="ng-cloak" ng-cloak="" ng-app="hello"> 
    <div class="container" ng-controller="navigation"> 
     <ul class="nav nav-pills" role="tablist"> 
      <li ng-class="{active:tab('home')}"><a href="/">Home</a></li> 
      <li class="dropdown"> 
       <a ng-class="{active:tab('someroute')}" class="dropdown-toggle" data-toggle="dropdown" href="/someroute">Some route 
       <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li ng-class="{active:tab('route3')}"><a href="/route3">route three</a></li> 
        <li ng-class="{active:tab('route4')}"><a href="/route4">route four</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    <div class="container" ng-view=""></div> 
    <script type="text/javascript" src="home.js"></script> 
    <script type="text/javascript" src="someroute.js"></script> 
    <script type="text/javascript" src="navigation.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    </body> 
</html>

来源

2016-02-02 CodeMed

你缺少你的榜样引导的JS文件，也JQuery的，这是由引导需要...尝试添加以下到您<head>：

<script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

来源

2016-02-02 01:33:18 jcane86

这个改变除了按照另一个用户的已删除答案的建议添加'＃'，解决了这个问题。查看更新后的plnkr：http://plnkr.co/edit/T96QWX1uEccH34l2Ievt?p=preview – CodeMed

您是否愿意评论如何让下拉菜单显示在鼠标上而不是点击鼠标？这将节省一个单独的张贴。谢谢你+1。 – CodeMed

当然，似乎bootstrap默认不支持它，但这里的第一个答案提供了一个非常简单的解决方案来自己做：http://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover – jcane86

你有几个问题在这里：

呦您在plnkr.co上使用html5Mode，根据我的经验，这不适用于路由，因为应用预览是在iframe中提供的
您包含Bootstrap的CSS，但不包括其JavaScript（对于Angular，您希望使用UI Bootstrap ）
当使用UI引导，则需要使用自定义指令uib-dropdown，uib-dropdown-toggle和uib-dropdown-menu而不是那些类，因为角使用指令来处理DOM元素，而不是类选择

这里是一个工作例如：plnkr.co

来源

2016-02-02 01:34:03

为什么这个下拉菜单填充工作链接？

回答

相关问题