如何将“本周”按钮变成下拉菜单？我究竟做错了什么？答案

【问题标题】：How to turn the "this week" button into a dropdown? what am i doing wrong?如何将“本周”按钮变成下拉菜单？我究竟做错了什么？
【发布时间】：2020-07-30 12:39:42
【问题描述】：

我正在使用 bootstrap 4 网站上的免费管理仪表板模板，是否可以将“本周”按钮变成下拉菜单？我已经研究了两天，看 youtube 视频没有成功。请看下面的代码和图片：

https://getbootstrap.com/docs/4.4/examples/dashboard/


    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
          </div>

    <!-- BUTTOM I AM TRYING TO CHANGE TO DROP DOWN -->   

          <div class="dropdown">
            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
              <span data-feather="calendar"></span>
              This week
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <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>
          </div>
        </div>
      </div>

Pick of screen before code modify

Pick after code modification

Code

【问题讨论】：

我猜你提交的代码与显示代码修改后选择图片的代码不同，因为它提交了正确的相应代码！！1

标签： javascript jquery css bootstrap-4

【解决方案1】：

@Samantha 在下拉按钮中您错过了添加data-toggle='dropdown' 属性。

应该如下，

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
          </div>
          <div class="dropdown">
            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
              <span data-feather="calendar"></span>
              This week
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <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>
          </div>
        </div>
      </div>

【讨论】：

【解决方案2】：

添加 data-toggle='dropdown' 属性将使下拉菜单起作用。检查这个演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
<div class="dropdown">
  <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
          </div>

    <!-- BUTTOM I AM TRYING TO CHANGE TO DROP DOWN -->   

          <div class="dropdown">
            <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
              <span data-feather="calendar"></span>
              This week
            </button>
            <div class="dropdown-menu">
              <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>
          </div>
        </div>
      </div>
</body>
</html>

【讨论】：

感谢 jsduniya 它有效！已经尝试了三天研究如何让它工作.. 如此简单.. 叹息#Codelife

【解决方案3】：

您确定包含所有必需的 Javascript 文件吗？您没有显示您的确切模板（只是指向 Bootstrap 示例的链接），因此很难说您是否遗漏了任何内容。无论如何，这是一个工作演示的最少代码。

<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

	  <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown">
		<span data-feather="calendar"></span>
		This week
	  </button>
	  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<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="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://getbootstrap.com/docs/4.4/examples/dashboard/dashboard.js"></script></body>

【讨论】：

嗨，Kmoser，我想我安装了所有脚本，可能看起来不像你的那样有货，但它们就在那里..
@Samantha 我的代码对你有用吗？如果是这样，请考虑accepting it as an answer，谢谢。
你所说的帮助，但第一反应更重要。因此我给了他们打勾。我认为告诉每个人感谢你真的很感激他们的意见是常态。我很无能，我很抱歉。