javascript - 带有下拉菜单的 Bootstrap Pill 不起作用

Question

我正在尝试使用 Bootstrap 中的 Dropdown UI 元素设置 Pill，但当我单击插入符号时它没有显示下拉菜单。我查看了 Bootstrap 文档及其来源)，但没有找到我遗漏的内容。

我需要编写自定义 JS 才能显示吗？文档显示我没有这样做，它应该可以正常工作。

这是我包含的 JS....

  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>

这是 HTML

<ul class="nav nav-pills">
    <li class="dropdown all-camera-dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            All Cameras
               <b class="caret"></b>
           </a>
    <ul class="dropdown-menu">
            <li data-filter-camera-type="all"><a data-toggle="tab" href="#">All Cameras</a></li>
            <li data-filter-camera-type="Alpha"><a data-toggle="tab" href="#">Alpha</a></li>
            <li data-filter-camera-type="Zed"><a data-toggle="tab" href="#">Zed</a></li>
            <li data-filter-camera-type="Bravo"><a data-toggle="tab" href="#">Bravo</a></li>

     </ul>
</li></ul>

任何帮助将不胜感激

Answer 1

它不起作用，因为您多次加载同一个插件，从您的包含中删除以下脚本，它应该可以正常工作:

删除

  <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>

bootstrap.js 脚本文件与所有插件打包在一起，因此您无需再次加载各个脚本文件。

保持

  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>