Bootstrap 下拉按钮不起作用

Question

我正在使用Bootstrap3和AngularJS编写前端代码。我想要一个按钮，在单击时显示两个选项 - 排序方法 1 和排序方法 2。我无法让 Bootstrap 拆分按钮正常工作。下拉菜单根本没有显示。

代码：

<th>
  <a ng-click="sort = method1" class="btn btn-default btn-md"> Numbers </a> 
  <a class = "btn btn-default dropdown-toggle btn-md" data-toggle = "dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </a>
  <ul class ="dropdown-menu">
    <li><a ng-click="sort = method1" class="btn btn-default btn-md"> Sorting Method 1 </a></li>
    <li><a ng-click="sort = method2" class="btn btn-default btn-md"> Sorting Method 2 </a></li>
  </ul>
</th>

有什么想法吗？谢谢。

Answer 1

它设置为屏幕 reader 只有 class sr-only 你看到插入符号了吗？

Answer 2

您缺少许多使此下拉按钮起作用所必需的组件。请参考文档dropdown buttons。

您的按钮没有放在 btn-group 中，您使用的是 a 标签而不是 button，并且没有设置 type="button"（因为 a 标签）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<th>
  <div class="btn-group">
    <button type="button" class="btn btn-default btn-md" ng-click="sort = method1">Numbers</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>

    </button>
    <ul class="dropdown-menu">
      <li><a ng-click="sort = method1" class="btn btn-default btn-md"> Sorting Method 1 </a>

      </li>
      <li><a ng-click="sort = method2" class="btn btn-default btn-md"> Sorting Method 2 </a>

      </li>
    </ul>
  </div>
</th>

Bootstrap 下拉按钮不起作用

Bootstrap Button Dropdown Not Working

button

twitter-bootstrap

angularjs

drop-down-menu