css - Bootstrap 下拉按钮不会打开任何链接

Question

我只是想不通为什么我的下拉按钮不起作用。我在控制台中看不到任何错误，我尝试在 head 元素和主体末尾调用 css 文件，但没有任何改变。这是我的导航菜单，里面有一个下拉按钮:

<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
        </div>

        <!-- Theme option content -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <i class="fa fa-pencil" aria-hidden="true"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a ng-click="changeTheme(1)">Flatly</a></li>
                            <li><a ng-click="changeTheme(2)">United</a></li>
                            <li><a ng-click="changeTheme(3)">Cerulean</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- Theme option content -->
    </div>
    <!-- Container -->
</nav>

我已经在底部包含了所有需要的文件:

 <!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="css/bootstrap.{{theme}}.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="css/spinner.css" /> 
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />

<!-- scripts -->
<script src="http://code.jquery.com/jquery.min.js"></script>

<!-- load angular libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>

<!-- APP scripts -->
<script src="app/hotels/hotels.js"></script>

Answer 1

因为你缺少 bootstrap.js

看看你的nav

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
    </div>

    <!-- Theme option content -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <i class="fa fa-pencil" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a ng-click="changeTheme(1)">Flatly</a>
              </li>
              <li><a ng-click="changeTheme(2)">United</a>
              </li>
              <li><a ng-click="changeTheme(3)">Cerulean</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <!-- Theme option content -->
  </div>
  <!-- Container -->
</nav>