时间戳

首页 > 解决方案 > 静态下拉菜单在 Bootstrap 中不起作用

javascript - 静态下拉菜单在 Bootstrap 中不起作用

问题描述

我想在我的管理面板上有一个菜单来浏览管理员在我的网站上拥有的不同功能。我正在使用引导程序，我在文档中找到了一个静态菜单代码片段（所以没有下拉菜单）：https ://getbootstrap.com/docs/4.4/components/dropdowns/#menu-items

我很确定我的 jquery、popper 和 boostrap js 文件可以正常工作，因为我的导航栏可以完美运行。我在这里做错了什么吗？您将在我的 html 正文中找到引导文档的确切片段。

谢谢

<!DOCTYPE html>
<html lang="nl">

<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=./../dependencies/bootstrap/css/bootstrap.css />

    <!-- Custom CSS (always after bootstrap) -->
    <link rel="stylesheet" href=./../dependencies/css/style.css />

    <title>Admin - Paneel</title>
</head>

<body>

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

<script src=./../dependencies/jquery/jquery-3.4.1.js></script>
<script src=./../dependencies/bootstrap/js/bootstrap.bundle.js></script>
</body>

    </html>

标签： javascripthtml

解决方案

您的下拉菜单 div 应该包含在 下拉div中

有一个按钮 

<div class="dropdown">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
    Dropdown
  </button>
<!-- your drop down gose here -->
</div>

    <div class="dropdown">

          <button class="dropdown-item" type="button">Action</button>
          <button class="dropdown-item" type="button">Another action</button>
          <button class="dropdown-item" type="button">Something else here</button>

      </div>

推荐阅读