浅谈Bootstrap中的下拉菜单类「dropdown-menu」

Bootstrap中的下拉菜单类「dropdown-menu」

Bootstrap是一套基于HTML、CSS及 JavaScript 的开源框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap中有一个重要的组件，下拉菜单。在Bootstrap的下拉菜单中，「dropdown-menu」起到了非常重要的作用。

什么是下拉菜单？

简单来说，下拉菜单就是一个由顶部按钮（触发器）引发的下拉框。可以参考Bootstrap官方文档的截图。


bootstrap dropdown菜单

dropdown-menu的使用方法

下拉菜单的使用非常简单，只需包裹在class为「dropdown」的父元素中，且父元素下有一个按钮来激活下拉菜单。这个按钮必须在一个兄弟元素中，并且是下拉菜单（class为「dropdown-menu」）的直接父元素。下面的代码演示了如何定义一个基本的下拉菜单：

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            下拉菜单
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">操作</a>
            <a class="dropdown-item" href="#">另一个操作</a>
            <a class="dropdown-item" href="#">其它操作</a>
        </div>
    </div> 

在html中，我们可以看到定义了class为「dropdown」的div元素。在这个元素中，我们定义了一个按钮，它通过class为「dropdown-toggle」来被自动触发。通过data-toggle属性来激活下拉菜单。最后，我们有下拉菜单定义的div元素。在这里，我们为其定义了class为「dropdown-menu」，并为其添加了一些链接，作为菜单项。我们的下拉菜单已经成功定义完毕。

dropdown-menu的常用选项

「dropdown-menu」在使用Dropdown组件时有一些常用的选项：

data-offset - 默认情况下，下拉菜单相对于触发器的顶部对齐。使用该选项可以自由调整涉及到位置的情况。可能的值是：2px、+ 2px、-2px。

data-flip - 设置为true可以在必要时翻转下拉菜单的定位，例如：指向窗口的边界而不是触发器。

data-boundary - 将此选项设置为 false 可强制放弃默认情况，下拉菜单永远不会超出弹出框 ，但这会导致其会溢出包含滚动区的容器。

下面的代码中使用了其中两个选项。

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-boundary="viewport">
            下拉菜单
        </button>
        <div class="dropdown-menu" data-offset="10 20" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">操作</a>
            <a class="dropdown-item" href="#">另一个操作</a>
            <a class="dropdown-item" href="#">其它操作</a>
        </div>
    </div> 

在上面这个例子中，我们把data-boundary设置成了「viewport」，这将保证下拉菜单不会超出浏览器的可见区域。我们还使用data-offset来调整菜单的位置。这样，我们的下拉菜单看起来应该是在触发器右下角的十个像素处。

dropdown-menu的JavaScript选项

除了上面的HTML属性之外，还可以在JavaScript中使用下面的属性来控制下拉菜单：

offsetParent - 下拉菜单应该相对于哪个元素进行定位。默认为触发器。

boundary - 元素显示的位置，默认为「scrollParent」

reference - 下拉菜单触发的元素。这通常是一个包含触发器和下拉菜单的共同祖先元素。

下面是JavaScript API的演示。

    var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
    var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
      return new bootstrap.Dropdown(dropdownToggleEl, {
        boundary: document.body
      });
    });

在上面这个例子里，我们获取了页面的所有下拉触发器，然后为每个下拉菜单创建了一个新的实例。注意到我们将body元素作为放置下拉菜单的边界，而不是默认的滚动容器。

总结

Bootstrap下拉菜单组件中的「dropdown-menu」类是非常实用，也是必不可少的一部分。通过本篇文章，我们了解了如何在HTML和JavaScript中使用「dropdown-menu」，并熟悉了其中的常用选项。如果你还不熟悉Bootstrap下拉菜单组件中的「dropdown-menu」，那么我建议你来试一试，它一定会让您的项目更加优雅和易用。