jquery - DataTable + Bootstrap 使下拉列表不起作用

Question

我第一次尝试使用数据表和 Bootstrap ，现在我真的很挣扎，因为数据表很棒，但我似乎根本无法让我的导航栏下拉菜单工作(数据表工作)。

这是我用于 html 布局的内容:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>

这是导航栏:

<div class="navbar navbar-collapsed">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Test</a>
        </div>
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Statistics <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li>@Html.ActionLink("1", "Chart1", "Home")</li>
                    <li>@Html.ActionLink("2", "Chart2", "Home")</li>
                    <li>@Html.ActionLink("3", "Chart3", "Home")</li>
                </ul>
            </li>
            <li></li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>   
    </div>
</div>

我试图通过删除脚本/重新排序/删除样式表来找出问题所在，但找不到问题所在!

Answer 1

您只需要包含 bootstrap.js进入列表 <script>标签。我也替换了你的ActionLink s 与简单 <a>用于显示您的下拉列表工作的标签，但我认为它们不是问题所在。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>

<div class="navbar navbar-collapsed">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Test</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Statistics <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Chart1</a></li>
          <li><a href="#">Chart2</a></li>
          <li><a href="#">Chart3</a></li>
        </ul>
      </li>
      <li></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>