下拉菜单的事件
Bootstrap为下拉菜单插件提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应。这些事件及含义见表 4‑3。
事件 | 含义 |
---|---|
show.bs.dropdown | show方法调用之后,立即触发该事件 |
shown.bs.dropdown | 当下拉菜单已经对用户可见(并且过渡效果执行完毕)之后,触发该事件 |
hide.bs.dropdown | hide方法调用之后,立即触发该事件 |
hidden.bs.dropdown | 当下拉菜单已经被隐藏(并且过渡效果执行完毕)之后,触发该事件 |
如果开发人员希望定制下拉菜单的功能,就可以通过JavaScript监听这些事件,来执行相应的操作。如:
<script>
$('#myDropdown').on('show.bs.dropdown', function () {
alert("开始显示下拉菜单。");
});
$('#myDropdown').on('shown.bs.dropdown', function () {
alert("下拉菜单已经显示。");
});
$('#myDropdown').on('hide.bs.dropdown', function () {
alert("开始隐藏下拉菜单。");
});
$('#myDropdown').on('hidden.bs.dropdown', function () {
alert("下拉菜单已经隐藏。");
});
</script>
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。