jsp 下拉列表选取触发function_Bootstrap下拉菜单样式
使用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><!-- 使用a标签 -->
<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>
下拉菜单尺寸
<div class="row mt-5"><!-- 下拉菜单尺寸 --><div class="col-3 d-flex"><div class="dropdown"><button class="btn btn-danger btn-lg dropdown-toggle" 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></div><div class="dropdown"><button class="btn btn-danger dropdown-toggle" 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></div><div class="dropdown"><button class="btn btn-danger btn-sm dropdown-toggle" 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></div></div>
</div>
下拉菜单方向
<div class="row mt-5"><div class="col"><div class="dropup"><!-- 向上展开 --><button class="btn btn-info dropdown-toggle" 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></div></div><div class="col"><div class="dropright"><!-- 向右展开 --><button class="btn btn-info dropdown-toggle" 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></div></div><div class="col"><div class="dropdown"><!-- 向下展开 --><button class="btn btn-info dropdown-toggle" 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></div></div><div class="col"><div class="dropleft"><!-- 向左展开 --><button class="btn btn-info dropdown-toggle" 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></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()
事件:
事件类型 | 描述 |
---|---|
show.bs.dropdown | 当调用show显示方法时,此事件会立即触发。 |
shown.bs.dropdown | 当下拉菜单对用户可见时,会触发此事件(将等待CSS转换完成)。 |
hide.bs.dropdown | 当调用隐藏实例方法时,会立即触发此事件。 |
hidden.bs.dropdown | 当下拉菜单从用户隐藏完毕时,会触发此事件(将等待CSS转换完成)。 |
<!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="https://stackpath.bootstrapcdn.com/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"><!-- js的方法与事件 --><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="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/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>
jsp 下拉列表选取触发function_Bootstrap下拉菜单样式相关推荐
- css下拉菜单样式_CSS样式下拉菜单
css下拉菜单样式 Introduction: 介绍: As we all know that the styling website or web pages are an important as ...
- html下拉菜单隐藏属性,css修改selec下拉菜单样式
css修改selec下拉菜单样式2018-01-19 15:00 修改select下拉菜单样式其实可以使用javascript来操作,这样更方便. 但有些人并不喜欢,想用单纯的css来控制. 以下有三 ...
- html手机下拉菜单样式,MUI下拉菜单样式
本文将要为您介绍的是MUI下拉菜单样式,教程操作方法: 1 2 性别 3 4 5 6 style="margin:auto; color:#000; 7 font-size: 14px;co ...
- css创建鼠标悬停下拉菜单样式
下拉菜单在网站中到处可见. 下面用css设置下拉菜单样式. <!DOCTYPE html> <html> <head> <title>淘宝</ti ...
- WordPress程序有哪些下拉菜单样式表代码?
WordPress主题最常用的菜单体验方式就是下拉菜单,但是很多新手对菜单的使用和调整方式都不是很明白,不懂样式表的更难操作. 那么WordPress程序有哪些下拉菜单样式表代码?今天就为大家提供现成 ...
- php菜单栏样式,最常见的多个css下拉菜单样式分享
CSS下拉菜单怎么做?在浏览网页的时候我们总会看到各式各样的下拉菜单,那么这些下拉菜单是怎么实现的呢?本篇文章就来给大家分享一下常用的多个CSS下拉菜单的实现方法. CSS下拉菜单的精选文章 随便打开 ...
- Bootstrap组件——【按钮(预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签)、按钮组(定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列)、下拉菜单(定义下拉菜单、下拉菜单样式)】
一.按钮 按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
- 前端element下拉菜单样式修改
组件官方链接 el-dropdown: 下拉菜单组件 el-dropdown-menu 结合 el-dropdown-item: 下拉菜单项 trigger="click" : ...
- 使用CSS制作下拉菜单样式
CSS制作下拉菜单 制作tooltip显示形式 代码示例 实现原理 HTML 部分 CSS 部分 制作可点击的下拉菜单 实现原理 代码示例 Appdex 制作tooltip显示形式 代码示例 < ...
最新文章
- Mysql忘记用户密码的解决办法
- /dev/console,/dev/tty 和 /dev/null
- python Logging日志记录模块详解
- 内容可编辑_让PDF像WORD一样自由编辑,好用的PDF编辑工具推荐
- css媒体查询改变上边距,CSS媒体查询宽度或高度
- idea非开源安装指南_开发人员开源指南
- C语言在STM32中的内存分配
- Flink watermark
- 随笔分类 - PowerShell
- vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程
- Cry with DX11
- 调整计算机繁体,电脑输入法是繁体怎么办?电脑输入法变成繁体的解决办法
- 常见的平均查找长度总结
- 一学校出150名在校“老板”
- HotStuff共识算法详解
- document.documentElement对象
- 依托人工智能实现的个性化推送
- unityui炫酷动画_Unity_Animation实现UI星星闪耀效果①
- 腾讯2019技术岗笔试 猜硬币 众所周知,每一枚硬币都有两面,假定投掷一枚硬币,得到正面和反面的概率是一样的。小Q有一天和好朋友在玩投掷硬币的游戏,他投了n枚硬币,已知至少有p正,q反,求n枚硬币
- 腾讯CSIG-腾讯云-后台开发-面经(已拿offer)
热门文章
- 数据从程序中传入到form中
- FILA之后又有Amer,安踏能成为“世界的安踏”吗?
- 租不起房!你离逃离北上广还有多长时间?
- 文件系统服务器管理论文,Linux管理磁盘和文件系统
- linux时间同修改,linux 系统时间修改同步
- python面向对象的三个基本特征 含义和作用简介_面向对象语言的三个基本特征各自特点及优势...
- C语言关于signal()函数
- python序列化详细教程
- Python小技巧:用 print() 函数实现的三个特效
- Python内置函数filter()和匿名函数lambda解析