Bootstrap 按钮下拉菜单
#Bootstrap 按钮下拉菜单
##简介
Bootstrap 是一个流行的前端开发框架,它提供了许多现成的组件,其中之一就是按钮下拉菜单。按钮下拉菜单通常用于需要提供更多可选项的场景,如网站的导航栏、用户设置等。
##使用
Bootstrap 按钮下拉菜单的使用很简单,只需要使用以下 HTML 代码即可:
<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>
其中,按钮以及下拉菜单都包含在一个带有 .dropdown
类的 div
元素中。按钮需要添加 .dropdown-toggle
和 .btn
类,下拉菜单需要添加 .dropdown-menu
类。此外,按钮需要添加以下 data-*
属性来激活下拉菜单:
data-toggle="dropdown"
:指定该按钮可以触发下拉菜单aria-haspopup="true"
:指定该按钮会打开一个菜单aria-expanded="false"
:指定该按钮打开的菜单是关闭的
下拉菜单的可选项用 a
元素实现,并添加 .dropdown-item
类。
##定位
默认情况下,下拉菜单会在按钮的下方展开,若需要在左侧或右侧展开,则可以添加以下 .dropdown-menu-right
或 .dropdown-menu-left
类:
<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 dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">选项一</a>
<a class="dropdown-item" href="#">选项二</a>
<a class="dropdown-item" href="#">选项三</a>
</div>
</div>
##触发方式
默认情况下,下拉菜单会在按钮被单击时触发。若需要在鼠标悬停时触发,则可以添加 .dropdown-hover
类,并使用以下 JavaScript 代码:
$('.dropdown-hover').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
此外,也可以使用 JavaScript 来手动触发下拉菜单的打开和关闭:
$('#myDropdown').on('show.bs.dropdown', function() {
// do something
});
$('#myDropdown').on('hide.bs.dropdown', function() {
// do something
});
##结论
Bootstrap 按钮下拉菜单是提供了一个快捷的方式来实现网站界面可交互性。菜单的位置和触发方式都可以自定义,并且使用起来非常简单。希望大家可以通过本篇技术文档对 Bootstrap 按钮下拉菜单有所了解。