首页 > 代码库 > BootStrap--dropdown
BootStrap--dropdown
下拉菜单
下拉菜单的基本结构为:
<div class="dropdown"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">item1</a></li> <li><a href="#">item1</a></li> <li class="divider"></li> <li><a href="#">item1</a></li> </ul></div>
下拉菜单的外层容器一定要提供了一个相对定位的属性,所以具有position:relative属性的元素就可以作为下拉菜单的外层容器
下拉菜单的按钮元素关键的属性为data-toggle="dropdown",该属性提供了HTML使用的触发条件,class="dropdown-toggle"提供了一些颜色的上的样式,基本上可以忽略
行内元素添加class="caret"是一个标识下拉菜单的一个小三角
下拉菜单的具体内容有ul-li-a嵌套使用,ul上添加class="dropdown-menu",li上添加class="divider"提供分隔功能,添加class="dropdown-header"提供一个分组的功能
默认下拉菜单是想下伸展的在最外层容器上设置class="dropup"可以让菜单向上
默认下拉菜单内容元素和触发元素是左边对齐的可以在最外层容器上设置class="pull-right"来实现右边对齐
JS使用
下拉菜单提供了四个事件(事件要绑定在最外层元素上):
1.show.bs.dropdown在下拉菜单出现之前触发
2.shown.bs.dropdown在下拉菜单出现之后触发
3.hide.bs.dropdown在下拉菜单隐藏之前触发
4.hidden.bs.dropdown在下拉菜单隐藏之后触发
使用方式为:
$(".dropdown").on("show.bs.dropdown",function(){alert("before show")})
BootStrap--dropdown
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。