javascript - 1 个按钮在 bootstrap 上打开 2 个下拉菜单

Question

我正在创建 2 个不同的下拉菜单，但是，它们打开的是相同的下拉菜单。

我的代码；

<div class="d-flex">

          <button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
            <span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
            <span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
          </button>
          <div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
            <a class="dropdown-item" href="">Price</a>
            <a class="dropdown-item" href="">Amount</a>
            <a class="dropdown-item" href="">Number</a>
          </div>

          <button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
            <span class="btn-inner--icon"><i class="far fa-user"></i></span>
            <span class="btn-inner--text d-none d-md-inline-block">User</span>
          </button>
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
            <a class="dropdown-item" href="account-settings.html">Settings</a>
            <a class="dropdown-item" href="account-billing.html">Billing</a>
            <a class="dropdown-item" href="account-notifications.html">Notifications</a>
          </div>

</div>

我该如何解决这个问题？

Answer 1

作为documentation声明并向您展示:

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
   <div class="dropdown">
      <button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
      <span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
      <span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
      </button>
      <div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
         <a class="dropdown-item" href="">Price</a>
         <a class="dropdown-item" href="">Amount</a>
         <a class="dropdown-item" href="">Number</a>
      </div>
   </div>
   <div class="dropdown">
      <button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
      <span class="btn-inner--icon"><i class="far fa-user"></i></span>
      <span class="btn-inner--text d-none d-md-inline-block">User</span>
      </button>
      <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
         <a class="dropdown-item" href="account-settings.html">Settings</a>
         <a class="dropdown-item" href="account-billing.html">Billing</a>
         <a class="dropdown-item" href="account-notifications.html">Notifications</a>
      </div>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>