【问题标题】：bootstrap dropdown doesn't dropdown?引导下拉菜单不下拉？
【发布时间】：2023-03-23 21:13:01
【问题描述】：

我有以下呈现的下拉列表（来自我的 rails 应用程序）：

<nav class="navbar navbar-inverse navbar-fixed-top topbar" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a href="/"></a></div>
    <div class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="/users/edit">Edit account</a></li>
        <li><a data-method="delete" href="/users/sign_out" rel="nofollow">Sign out</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="/users">Users</a></li>
            <li><a href="#"> Another action</a></li>
            <li class="divider"></li>
            <li><a href="#"> Another action2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

显示如下：

看起来不错，但下拉菜单不起作用。前一阵子我让它工作了，但我不知道为什么这不起作用（下拉列表只是指向“#”的链接；即，它不会下拉）。

日志文件没有任何内容。我不确定在哪里可以解决此问题。我该如何解决这个问题？

编辑：从 head 标签添加 js 这些是包括：

<head>
  <link href="http://fonts.googleapis.com/css?family=Ruda:400,900,700" media="screen" rel="stylesheet">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>title</title>
  <meta content="title" name="description">
  <link data-turbolinks-track="true" href="/assets/framework_and_overrides.css?body=1" media="all" rel="stylesheet">
  <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet">
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
  <style type="text/css"></style>
  <script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/bootstrap-sprockets.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/jetmenu.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/visitors.js?body=1"></script>
  <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param">
  <meta content="***" name="csrf-token">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
</head>

【问题讨论】：

如果您在 dropdown.js 或 bootstrap.js 之前包含了另一个 JavaScript 文件，那么该文件中的错误可能会阻止进一步的脚本执行？脚本之间也可能存在冲突。
它应该包含在我的应用程序布局中，但我会检查一下。它不会用引导程序做我的任何页面吗？还是在控制台报错？
该页面仍会显示，但它不会执行 Bootstrap 所需的任何 JavaScript。如果其他交互元素正在工作，那么您可能已经包含了脚本。你有 jQuery 吗？所有 Bootstrap 插件都需要它。
好像是css的问题
我倾向于同意@Daniel 的观点，即这可能是一个javascript 问题。您能否按顺序提供页面正在使用的 javascript 文件的列表？例如，引导脚本必须在 jquery 脚本之后加载才能正常工作。

标签： javascript jquery html ruby-on-rails twitter-bootstrap

【解决方案1】：

您必须通过 JavaScript 调用下拉菜单：

 <script>
        $('.dropdown-toggle').dropdown();
    </script>

在您的脚本中添加此代码

DEMO

【讨论】：