下拉菜单

下拉菜单-Bootstrap 5和Material Design 2.0组件

使用MDB下拉菜单切换上下文叠加层以显示链接列表以及更多内容 插入。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


Basic examples

将下拉菜单的切换按钮(您的按钮或链接)和下拉菜单包装在一起 .dropdown 或另一个声明 position:relative; 的元素。 下拉菜单可以触发 <a> 要么 <button> e元素,以更好地满足您的潜在需求。此处显示的示例使用语义 <ul> 元素,但支持自定义标记。

常规按钮

任何单个 .btn 都可以变成带有某些标记更改的下拉开关。 您可以通过以下方法将它们与任何一个一起使用<button> 元素:


            <div class="dropdown">
              <button
                class="btn btn-primary dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown button
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </div>
          

色彩

您可以使用任何按钮变体来做到这一点:


          <!-- Primary -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-primary dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Secondary -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-primary dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Success -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-success dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Info -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-info dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Warning -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-warning dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Danger -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-danger dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Danger -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-danger dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Dark -->
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-dark dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Light -->
          <div class="btn-group shadow-0">
            <button
              type="button"
              class="btn btn-light dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Link -->
          <div class="btn-group shadow-0">
            <button
              type="button"
              class="btn btn-link dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Action
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>
        

分割按钮

同样,创建拆分按钮下拉菜单,其标记实际上与单个按钮相同 下拉菜单,但增加了 .dropdown-toggle-split 以便在下拉式插入符周围保持适当的间距。

我们使用此额外的类来减少页面两侧的水平 padding 插入25%,然后删除为常规按钮添加的 margin-left 下拉菜单。这些额外的更改使插入符号位于“拆分”按钮的中心,并提供了更多 大小合适的主按钮旁边的点击区域。


          <!-- Example split primary button -->
          <div class="btn-group">
            <button type="button" class="btn btn-primary">Action</button>
            <button
              type="button"
              class="btn btn-primary dropdown-toggle dropdown-toggle-split"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>
        

浆纱

按钮下拉菜单可用于所有大小的按钮,包括默认和拆分下拉按钮。


          <!-- Large button groups (default and split) -->
          <div class="btn-group">
            <button
              class="btn btn-primary btn-lg dropdown-toggle"
              type="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Large button
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group">
            <button class="btn btn-primary btn-lg" type="button">Large split button</button>
            <button
              type="button"
              class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>

          <!-- Small button groups (default and split) -->
          <div class="btn-group">
            <button
              class="btn btn-primary btn-sm dropdown-toggle"
              type="button"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Small button
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>
          <div class="btn-group">
            <button class="btn btn-primary btn-sm" type="button">Small split button</button>
            <button
              type="button"
              class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>
        

方向

放弃

通过将 .dropup 添加到父元素来触发元素上方的下拉菜单。


            <!-- Default dropup button -->
            <div class="btn-group dropup">
              <button
                type="button"
                class="btn btn-primary dropdown-toggle"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                Dropup
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>

            <!-- Split dropup button -->
            <div class="btn-group dropup">
              <button type="button" class="btn btn-primary">Split dropup</button>
              <button
                type="button"
                class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                <span class="visually-hidden">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>
          

dropright

通过添加触发元素右侧的下拉菜单 .dropend 到父元素。


            <!-- Default dropright button -->
            <div class="btn-group dropend">
              <button
                type="button"
                class="btn btn-primary dropdown-toggle"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                Dropright
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>

            <!-- Split dropright button -->
            <div class="btn-group dropend">
              <button type="button" class="btn btn-primary">Split dropright</button>
              <button
                type="button"
                class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                <span class="visually-hidden">Toggle Dropright</span>
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>
          

左下

通过添加来触发元素左侧的下拉菜单 .dropstart 到父元素。


            <!-- Default dropleft button -->
            <div class="btn-group dropstart">
              <button
                type="button"
                class="btn btn-primary dropdown-toggle"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                Dropleft
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>

            <!-- Split dropleft button -->
            <div class="btn-group">
              <div class="btn-group dropstart" role="group">
                <button
                  type="button"
                  class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                  data-mdb-toggle="dropdown"
                  aria-expanded="false"
                >
                  <span class="visually-hidden">Toggle Dropleft</span>
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider" /></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>
              <button type="button" class="btn btn-primary">Split dropleft</button>
            </div>
          

菜单项

历史上下拉菜单内容必须是链接,但情况不再如此 与v4。现在您可以选择使用 <button> 下拉菜单中的元素 而不只是 <a>s.


          <div class="dropdown">
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              id="dropdownMenu2"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
              <li><button class="dropdown-item" type="button">Action</button></li>
              <li>
                <button class="dropdown-item" type="button">Another action</button>
              </li>
              <li>
                <button class="dropdown-item" type="button">Something else here</button>
              </li>
            </ul>
          </div>
        

您还可以使用以下命令创建非交互式下拉项 .dropdown-item-text 。随意使用自定义CSS或文本进行进一步样式设置 实用程序。


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

活性

.active 添加到下拉菜单中的项目,以将其设置为活动状态。 要将主动状态传达给辅助技术,请使用 aria-current 属性-使用当前的 page 值 页面,或集合中当前项目的 true


            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Regular link</a></li>
              <li>
                <a class="dropdown-item active" href="#" aria-current="true">Active link</a>
              </li>
              <li><a class="dropdown-item" href="#">Another link</a></li>
            </ul>
          

残障人士

.disabled 添加到下拉菜单中的项 将其设置为禁用状态


            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Regular link</a></li>
              <li>
                <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true"
                  >Disabled link</a
                >
              </li>
              <li><a class="dropdown-item" href="#">Another link</a></li>
            </ul>
          

菜单对齐

默认情况下,下拉菜单自动从顶部和左侧沿100%定位 其父的一面。将 .dropdown-menu-end 添加到 .dropdown-menu 右对齐下拉菜单。


          <div class="btn-group">
            <button
              type="button"
              class="btn btn-primary dropdown-toggle"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Right-aligned menu
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><button class="dropdown-item" type="button">Action</button></li>
              <li>
                <button class="dropdown-item" type="button">Another action</button>
              </li>
              <li>
                <button class="dropdown-item" type="button">Something else here</button>
              </li>
            </ul>
          </div>
        

响应式对齐

如果要使用自适应对齐,请通过添加 data-mdb-display="static"属性并使用响应变体类。

要将下拉菜单与给定的断点或更大的点对齐,请添加 .dropdown-menu {-sm | -md | -lg | -xl | -xxl}-结束


            <div class="btn-group">
              <button
                type="button"
                class="btn btn-primary dropdown-toggle"
                data-mdb-toggle="dropdown"
                data-mdb-display="static"
                aria-expanded="false"
              >
                Left-aligned but right aligned when large screen
              </button>
              <ul class="dropdown-menu dropdown-menu-lg-end">
                <li><button class="dropdown-item" type="button">Action</button></li>
                <li>
                  <button class="dropdown-item" type="button">Another action</button>
                </li>
                <li>
                  <button class="dropdown-item" type="button">Something else here</button>
                </li>
              </ul>
            </div>
          

要将下拉菜单与给定的断点或更大的点对齐,请添加 .dropdown-menu-end .dropdown-menu {-sm | -md | -lg | -xl | -xxl}-开始


            <div class="btn-group">
              <button
                type="button"
                class="btn btn-primary dropdown-toggle"
                data-mdb-toggle="dropdown"
                data-mdb-display="static"
                aria-expanded="false"
              >
                Right-aligned but left aligned when large screen
              </button>
              <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
                <li><button class="dropdown-item" type="button">Action</button></li>
                <li>
                  <button class="dropdown-item" type="button">Another action</button>
                </li>
                <li>
                  <button class="dropdown-item" type="button">Something else here</button>
                </li>
              </ul>
            </div>
          

请注意,您不需要添加 data-mdb-display="static" 属性归因于导航栏中的下拉按钮,因为 导航栏中不使用Popper。


菜单内容

标头

在任何下拉菜单中添加标题以标记动作部分。


            <ul class="dropdown-menu">
              <li><h6 class="dropdown-header">Dropdown header</h6></li>
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
            </ul>
          

分频器

用分隔符将相关菜单项的组分开。


            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          

文本

将任意格式的文本放在带有文本的下拉菜单中并使用 spacing实用程序。请注意,您可能会 需要其他大小调整样式来限制菜单宽度。


            <div class="dropdown-menu p-4 text-muted" style="max-width: 200px">
              <p>Some example text that's free-flowing within the dropdown menu.</p>
              <p class="mb-0">And this is more example text.</p>
            </div>
          

形式

将表单放入下拉菜单,或放入下拉菜单,然后使用 边距或填充实用程序为它提供 您需要的负空间。


            <div class="dropdown-menu">
              <form class="px-4 py-3">
                <!-- Email input -->
                <div class="form-outline mb-4">
                  <input type="email" id="form1Example1" class="form-control" />
                  <label class="form-label" for="form1Example1">Email address</label>
                </div>

                <!-- Password input -->
                <div class="form-outline mb-4">
                  <input type="password" id="form1Example2" class="form-control" />
                  <label class="form-label" for="form1Example2">Password</label>
                </div>

                <!-- 2 column grid layout for inline styling -->
                <div class="row mb-4">
                  <div class="col d-flex justify-content-center">
                    <!-- Checkbox -->
                    <div class="form-check">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        value=""
                        id="form1Example3"
                        checked
                      />
                      <label class="form-check-label" for="form1Example3"> Remember me </label>
                    </div>
                  </div>

                  <div class="col">
                    <!-- Simple link -->
                    <a href="#!">Forgot password?</a>
                  </div>
                </div>

                <!-- Submit button -->
                <button type="submit" class="btn btn-primary btn-block">Sign in</button>
              </form>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">New around here? Sign up</a>
              <a class="dropdown-item" href="#">Forgot password?</a>
            </div>
          

            <div class="dropdown">
              <button
                class="btn btn-primary dropdown-toggle"
                type="button"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown form
              </button>
              <div class="dropdown-menu">
                <form class="px-4 py-3">
                  <!-- Email input -->
                  <div class="form-outline mb-4">
                    <input type="email" id="form1Example1" class="form-control" />
                    <label class="form-label" for="form1Example1">Email address</label>
                  </div>

                  <!-- Password input -->
                  <div class="form-outline mb-4">
                    <input type="password" id="form1Example2" class="form-control" />
                    <label class="form-label" for="form1Example2">Password</label>
                  </div>

                  <!-- 2 column grid layout for inline styling -->
                  <div class="row mb-4">
                    <div class="col d-flex justify-content-center">
                      <!-- Checkbox -->
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          value=""
                          id="form1Example3"
                          checked
                        />
                        <label class="form-check-label" for="form1Example3"> Remember me </label>
                      </div>
                    </div>

                    <div class="col">
                      <!-- Simple link -->
                      <a href="#!">Forgot password?</a>
                    </div>
                  </div>

                  <!-- Submit button -->
                  <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                </form>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">New around here? Sign up</a>
                <a class="dropdown-item" href="#">Forgot password?</a>
              </div>
            </div>
          

删除动画

要删除点击时的淡入淡出动画,请添加 data-mdb-dropdown-animation="off" 属性设置为下拉按钮。


          <div class="dropdown">
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              id="dropdownExampleAnimation"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
              data-mdb-dropdown-animation="off"
            >
              Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownExampleAnimation">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </div>
        

下拉选项

使用 data-mdb-offset data-mdb-reference 更改其位置 下拉菜单。


          <div class="d-flex">
            <div class="dropdown me-1">
              <button
                type="button"
                class="btn btn-primary dropdown-toggle"
                id="dropdownMenuOffset"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
                data-mdb-offset="10,20"
              >
                Offset
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-primary">Reference</button>
              <button
                type="button"
                class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                id="dropdownMenuReference"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
                data-mdb-reference="parent"
              >
                <span class="visually-hidden">Toggle Dropdown</span>
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
            </div>
          </div>
        

黑暗变种

.dropdown-menu-dark 添加到现有的 .dropdown-menu 上以匹配 黑暗的导航栏。


          <div class="dropdown">
            <button
              class="btn btn-secondary dropdown-toggle"
              type="button"
              id="dropdownMenuButton2"
              data-mdb-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown button
            </button>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
              <li><a class="dropdown-item active" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </div>
        

下拉菜单 - API


用法

通过数据属性或JavaScript,下拉插件可切换隐藏的内容(下拉菜单) 通过在父列表项上切换 .show 类。的 data-mdb-toggle="dropdown"依靠属性可以在以下位置关闭下拉菜单 应用程序级别,因此始终使用它是一个好主意。

注意:
在支持触摸功能的设备上,打开下拉菜单会添加空白 将 mouseover 处理函数传递给 <body>元件。这种公认的难看的骇客对于解决 iOS事件委派中的怪癖,否则会阻止下拉菜单之外的任何位置的点击触发 关闭下拉菜单的代码。下拉菜单关闭后,这些额外的空白 mouseover 处理程序已删除。

通过数据属性

data-mdb-toggle="dropdown" 链接或按钮以切换下拉菜单。


          <div class="dropdown">
            <button id="dLabel" type="button" data-mdb-toggle="dropdown" aria-expanded="false">
              Dropdown trigger
            </button>
            <ul class="dropdown-menu" aria-labelledby="dLabel">
              ...
            </ul>
          </div>
        

通过JavaScript

通过JavaScript调用下拉菜单:


          const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
          const dropdownList = dropdownElementList.map((dropdownToggleEl) => {
            return new mdb.Dropdown(dropdownToggleEl)
          })
        

data-mdb-toggle="dropdown"仍然需要:
无论您是通过JavaScript调用下拉菜单还是使用data-mdb-api, data-mdb-toggle="dropdown"始终要求出现在下拉菜单的 触发元素。


选件

可以通过数据属性或JavaScript传递选项。对于数据属性,请附加 选项名称为 data-mdb-,如 data-mdb-offset="".

Name Type Default Description
offset number | string | function 0

Offset of the dropdown relative to its target.

When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.

For more information refer to Popper's offset docs.

flip boolean true Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's flip docs.
boundary string | element 'scrollParent' Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
reference string | element 'toggle' Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper's referenceObject docs.
display string 'dynamic' By default, we use Popper for dynamic positioning. Disable this with static.
popperConfig null | object null To change Bootstrap's default Popper config, see Popper's configuration
dropdownAnimation string 'on' Turn on / off dropdown animation.

Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.


方法

Method Description
toggle Toggles the dropdown menu of a given navbar or tabbed navigation.
show Shows the dropdown menu of a given navbar or tabbed navigation.
hide Hides the dropdown menu of a given navbar or tabbed navigation.
update Updates the position of an element's dropdown.
dispose Destroys an element's dropdown.
getInstance Static method which allows you to get the dropdown instance associated with a DOM element.

          const myDropdown = document.getElementById('myDropdown')
          const bsDropdown = new mdb.Dropdown(myDropdown)
          bsDropdown.show()
        

大事记

所有下拉事件均在 .dropdown-menu 的父元素上触发,并具有一个 relatedTarget 属性,其值是切换锚元素。 hide.mdb.dropdown hidden.mdb.dropdown 事件有一个 clickEvent 属性(仅当原始事件类型为 click 时) 包含点击事件的事件对象。

Method Description
show.mdb.dropdown Fires immediately when the show instance method is called.
shown.mdb.dropdown Fired when the dropdown has been made visible to the user and CSS transitions have completed.
hide.mdb.dropdown Fires immediately when the hide instance method has been called.
hidden.mdb.dropdown Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.

          const myDropdown = document.getElementById('myDropdown')
          myDropdown.addEventListener('show.mdb.dropdown', () => {
            // do something...
          })
        

Import

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Dropdown } from 'mdb-ui-kit';