100字范文 > jsp 下拉列表选取触发function_Bootstrap下拉菜单样式

jsp 下拉列表选取触发function_Bootstrap下拉菜单样式

时间：2021-12-06 07:01:32

使用Bootstrap下拉插件用于显示切换你要展示的链接列表和更多内容的，或触发其它内容显示(覆盖）。

将下拉列表的切换（按钮或链接）和下拉菜单包含在.dropdown中，或者另外声明position: relative;元素;可以从<a>或<button>触发下拉菜单，以适应你的使用的需求。

单一按钮的下拉菜单

任何一个.btn块都可以定义变更为下拉菜单，下面是两个使用<button>元素做下拉菜单的示例。

<div class="col-2"><div class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div></div><div class="col-2"><div class="dropdown"><a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a标签下拉</a><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div></div>

分离式按钮下拉菜单

同样，可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，注意添加了.dropdown-toggle-split-插入此符号为下拉选项作适当的间隔（距）处理。

<div class="col-3"><div class="btn-group dropdown"><button class="btn btn-success btn-lg">分离式按钮下拉菜单</button><button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div></div>

下拉菜单尺寸

下拉菜单方向

非交互式的下拉菜单

有效菜单：加上.active让下拉列表中的项样式为active。

不可用菜单：加上.disabled让下拉列表中的项样式为不可用。

<div class="row mt-5"><div class="col"><div class="dropdown"><div class="dropdown-menu show"><span class="dropdown-item-text">非点击的项</span><h4 class="dropdown-header">下拉菜单的标题</h4><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item active">上海</a> <a href="#" class="dropdown-item disabled">广州</a> <div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div></div>

菜单偏移

使用data-offset或data-reference更改下拉菜单的位置。

<div class="row mt-5" style="margin-top: 260px!important;"><div class="col"><div class="dropdown"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="10,20">偏移</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div><div class="col"><div class="dropdown"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">偏移</button><div class="dropdown-menu" data-reference="parent"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div></div>

js的方法与事件$('.dropdown-toggle').dropdown()

事件：

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>Bootstrap下拉菜单样式</title></head><body><div class="container"><div class="row mt-5"><div class="col"><div class="dropdown"><button class="btn btn-danger dropdown-toggle" id="myBtn">方法</button><div class="dropdown-menu" id="myDropdown" data-reference="parent"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div><div class="col"><div class="dropdown" id="myDropdown1"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">事件</button><div class="dropdown-menu" data-reference="parent"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div></div></div><script src="/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><script>//方法$('#myBtn').click(function () {//$('#myDropdown').dropdown('show');//$('#myDropdown').dropdown('hide');//$('#myDropdown').dropdown('toggle');//解决toggle的问题$('#myDropdown').toggle(function () {$('#myDropdown').dropdown('show');}, function () {$('#myDropdown').dropdown('hide');});});//事件$('#myDropdown1').on('show.bs.dropdown', function () {console.log('调用了show方法');});$('#myDropdown1').on('shown.bs.dropdown', function () {console.log('下拉列表完全显示了');});$('#myDropdown1').on('hide.bs.dropdown', function () {console.log('调用了hide方法');});$('#myDropdown1').on('hidden.bs.dropdown', function () {console.log('下拉列表完全隐藏了');});</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。