Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예)
- 不言앞으로
- 2018-10-15 16:52:356554검색
이 글은 부트스트랩 프레임워크에서의 드롭다운 메뉴 구현에 관한 것입니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다.
웹 페이지와 상호 작용할 때 상황에 맞는 메뉴 또는 숨겨진/표시 메뉴 항목이 필요한 경우가 많습니다. Bootstrap은 기본적으로 링크 목록을 표시하기 위한 전환 가능한 상황에 맞는 메뉴를 제공합니다. 또한 다양한 대화형 상태의 메뉴 표시는 자바스크립트 플러그인과 함께 사용해야 합니다. 이번 글에서는 Bootstrap 드롭다운 메뉴에 대해 자세히 소개하겠습니다. (무료 강좌 추천: bootstrap tutorial)
사용 방법
Bootstrap 프레임워크의 드롭다운 메뉴를 사용할 때는 bootstrap.js를 호출해야 합니다. Bootstrap 프레임워크에서 제공하는 파일입니다. 물론, 컴파일되지 않은 버전을 사용한다면 js 폴더에서 "dropdown.js"라는 파일을 찾을 수 있고, 이 js 파일을 호출할 수도 있습니다
Bootstrap의 컴포넌트 상호작용 효과는 모두 jQuery 라이브러리를 기반으로 작성되었기 때문입니다. 플러그인이므로 효과를 생성하려면 bootstrap.js를 사용하기 전에 jquery.js를 로드해야 합니다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
기본 사용법
Bootstrap 프레임워크에서 드롭다운 메뉴 구성 요소를 사용할 때 사용하는 것이 매우 중요합니다. 올바른 구조가 중요합니다. 구조와 클래스 이름이 올바르게 사용되지 않으면 구성 요소의 정상적인 사용 여부에 직접적인 영향을 미칩니다
1. 전체 드롭다운 메뉴 요소를 래핑하려면 "dropdown"이라는 컨테이너를 사용하세요.
<div class="dropdown"></div>2. 사용 버튼은 상위 메뉴로 사용되며 클래스 이름 "dropdown-toggle" 및 사용자 정의 "data-toggle" 속성을 정의하며 값은 다음과 일치해야 합니다. 가장 바깥쪽 컨테이너 클래스 이름
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">3. 드롭다운 메뉴 항목은 ul 목록을 사용하고 "dropdown-menu"
<ul class="dropdown-menu" role="menu">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
클래스를 설정하면 메뉴가 팝업되도록 할 수 있습니다(기본값은 팝다운).dropup
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
원리 분석
Bootstrap 프레임워크의 드롭다운 메뉴 구성요소인 해당 드롭다운 메뉴 항목은 사용자가 상위 메뉴 항목을 클릭할 때 "dropdown-menu" 기본 스타일이 "display:none"으로 설정되어 있기 때문에 기본적으로 숨겨집니다. , 드롭다운 메뉴가 표시되며, 사용자가 다시 클릭하면 드롭다운 메뉴가 계속 숨겨집니다.dropdown-menu {
position: absolute;/*设置绝对定位，相对于父元素p.dropdown*/
top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
left: 0;
z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
display: none;/*默认隐藏下拉菜单项*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
[구현 원칙]1. 웹 페이지가 로드되면 드롭다운 메뉴가 플러그인은 data-toggle="dropdown" 스타일 2으로 모든 요소에 이벤트 바인딩을 수행합니다. 사용자가 data-toggle="dropdown" 스타일로 링크나 버튼을 클릭하면 자바스크립트 이벤트 코드가 트리거됩니다 3. 자바스크립트 이벤트 코드는 상위 컨테이너에 .open 스타일을 추가합니다 4. 기본적으로 숨겨져 있는 .dropdown-menu 메뉴는 외부적으로 .open 스타일을 적용한 후 표시할 수 있어 기대 효과 5. 사용자가 다시 클릭하면 "p.dropdown" 컨테이너의 클래스 이름 "open"이 다시 제거됩니다.
.open > .dropdown-menu {
display: block;
}
[기타 사용법]또 다른 흥미로운 사용법이 있습니다. 트리거 요소는 상위 요소 외부에 배치될 수 있습니다. 메뉴의 컨테이너 단, 이 방법을 사용할 때 주의할 점이 두 가지 있습니다 1. 상위 컨테이너의 id 값을 설정합니다 2. 트리거 요소의 data-toggle 속성과 data-target 속성을 설정하고, 데이터 대상 속성 값은 #id
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" data-target="#dropdown1">外部触发器</button>
<div class="dropdown" id="dropdown1">
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">HTML</a></li>
<li role="presentation"><a href="##">CSS</a></li>
<li role="presentation"><a href="##">javascript</a></li>
</ul>
</div>
Extended Usage
[Divider]Bootstrap 프레임워크의 드롭다운 메뉴는 드롭다운 구분선을 제공합니다. 드롭다운 메뉴에 두 개의 그룹이 있는 경우 그룹 사이에 빈.dropdown-menu .pider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
<li role="separator" class="pider"></li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
【메뉴 제목】
드롭다운 메뉴에 제목을 추가하여 작업 그룹을 표시할 수 있습니다
<li class="dropdown-header">Dropdown header</li>
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
} <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
【对齐方式】
Bootstrap框架中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名
.dropdown-menu-right {
right: 0;
left: auto;
}
由于
默认是块级元素，撑满父级宽度。这里，需要为该元素设置inline-block和margin-left，使其内容撑开宽度，且距离左侧有一定距离
display: inline-block;
margin-left: 60px;
<div class="dropdown" style="display: inline-block;margin-left: 60px;">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
【菜单项状态】
下拉菜单项的默认的状态有悬浮状态（:hover）和焦点状态（:focus）
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
JS触发
和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。但是，要特点注意的是，即使使用JS触发，也不能去掉触发元素的data-toggle="dropdown"
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" type="button">触发器</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">HTML</a></li>
<li role="presentation"><a href="##">CSS</a></li>
<li role="presentation"><a href="##">javascript</a></li>
</ul>
</div>
<script>
;$(function(){
$('.dropdown-toggle').dropdown()
});
</script>
【toggle】
和Modal一样，dropdown也接收字符串作为参数进行传递，参数可以是"toggle"
但是，这非常不好用。每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用不带参数的方法。就算需要使用参数“toggle”，也建议使用jQuery的one方法
$(".dropdown-toggle").one("click",function(){
$(this).dropdown("toggle");
})
【事件订阅】
与Modal类似，下拉菜单支持4种类型的事件订阅，分别对应下拉菜单的弹出前、弹出后、关闭前、关闭后
show.bs.dropdown 在show方法调用时立即触发(尚未显示之前) shown.bs.dropdown 在下拉菜单完全显示给用户之后(并且等CSS动画完成之后)触发 hide.bs.dropdown 在hide方法调用时(但还未关闭隐藏)立即触发 hidden.bs.dropdown 在下拉菜单完全隐藏之后(并且等CSS动画完成之后)触发
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown" type="button">触发器</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">HTML</a></li>
<li role="presentation"><a href="##">CSS</a></li>
<li role="presentation"><a href="##">javascript</a></li>
</ul>
</div>
<script>
;$(function(){
$('.dropdown').on('show.bs.dropdown',function(){
$('.dropdown-toggle').html('关闭');
});
$('.dropdown').on('hide.bs.dropdown',function(){
$('.dropdown-toggle').html('打开');
});
});
</script>
JS源码
【1】IIFE
使用立即调用函数，防止插件内代码外泄，从而形成一个闭环，并且只能从jQuery的fn里进行扩展
+function ($) { //使用es5严格模式
'use strict'; //}(window.jQuery);
【2】初始设置
//弹出下拉菜单时的蒙版样式
var backdrop = '.dropdown-backdrop'
//dropdown触发元素的自定义属性
var toggle = '[data-toggle="dropdown"]'
var Dropdown = function (element) {
//插件类函数定义，一旦触发，就在click事件上绑定toggle，所以不能再用自定义代码进行toggle了
$(element).on('click.bs.dropdown', this.toggle)
}
//版本号为'3.3.7'
Dropdown.VERSION = '3.3.7'
【3】插件核心代码
//获取下拉菜单的父元素容器
function getParent($this) {
//获取触发元素的'data-target'特性值，表示下拉菜单的父元素容器的选择器
var selector = $this.attr('data-target')
//如果触发元素没有设置'data-target'
if (!selector) {
//获取触发元素的'href'特性值，表示下拉菜单的父元素容器的选择器
selector = $this.attr('href')
//该值是所弹出元素的id值
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}
//通过选择器，来获取下拉菜单的父元素容器
var $parent = selector && $(selector)
//如果找到，说明触发元素确实在下拉菜单外部，则返回找到的下拉菜单的父元素容器即可
//如果没有找到，说明触发元素在下拉菜单内部，则返回它的直接父级元素
return $parent && $parent.length ? $parent : $this.parent()
}
//关闭所有的下拉菜单
function clearMenus(e) {
//如果点击的是鼠标右键，则直接返回
if (e && e.which === 3) return
//删除用于移动设备的蒙版
$(backdrop).remove()
//根据选择器，遍历所有的dropdown标记，然后全部关闭
$(toggle).each(function () {
var $this = $(this)
var $parent = getParent($this)
var relatedTarget = { relatedTarget: this }
//如果下拉菜单的父元素容器没有open类名，则直接返回
if (!$parent.hasClass('open')) return
//如果触发了鼠标单击事件，并且鼠标事件的目标元素是input或textarea，则直接返回
if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
//关闭前，触发hide事件
$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
//如果阻止了默认行为，则直接返回
if (e.isDefaultPrevented()) return
$this.attr('aria-expanded', 'false')
//关闭后，触发hidden事件
$parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
})
}
//控制下拉菜单的打开、关闭操作
Dropdown.prototype.toggle = function (e) {
var $this = $(this)
//如果有禁用标记，则不处理
if ($this.is('.disabled, :disabled')) return
//获取下拉菜单的父元素容器
var $parent = getParent($this)
//判断下拉菜单的父元素容器是否有open样式
var isActive = $parent.hasClass('open')
//关闭所有的下拉菜单
clearMenus()
//如果是，在clearMenus阶段已经关闭了，所以不需要再次关闭
//如果不是，说明默认是关闭状态，则需要展开下拉菜单
if (!isActive) {
//如果是移动设置，则使用dropdown-backdrop样式，因为移动设备不支持click单击委托
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
$(document.createElement('div'))
.addClass('dropdown-backdrop')
.insertAfter($(this))
.on('click', clearMenus)
}
var relatedTarget = { relatedTarget: this }
//展开下拉菜单前，触发show事件
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
//如果阻止了默认行为，则直接返回
if (e.isDefaultPrevented()) return
$this
//设置focus样式
.trigger('focus')
.attr('aria-expanded', 'true')
$parent
//设置open样式
.toggleClass('open')
//展开下拉菜单后，触发shown事件
.trigger($.Event('shown.bs.dropdown', relatedTarget))
}
return false
}
//利用键盘控制下拉菜单
Dropdown.prototype.keydown = function (e) {
//如果按键不是esc、或上下方向键、或空格键，或者目标元素是input或textarea控件，则忽略处理
if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
var $this = $(this)
//阻止默认行为及冒泡
e.preventDefault()
e.stopPropagation()
//如果有禁用标记，则不做处理
if ($this.is('.disabled, :disabled')) return
//获取下拉菜单的父元素容器
var $parent = getParent($this)
//判断父元素是否有open样式
var isActive = $parent.hasClass('open')
//如果有open样式并且按键不是向下箭头，或者没有open样式并且按键是向下箭头，也打开下拉菜单
if (!isActive && e.which != 27 || isActive && e.which == 27) {
//如果按下向下箭头，则给触发元素加上焦点
if (e.which == 27) $parent.find(toggle).trigger('focus')
//触发单击事件
return $this.trigger('click')
}
//返回可以利用箭头选择的下拉菜单项
//必须是可见的a链接，并且不包括分隔符
var desc = ' li:not(.disabled):visible a'
var $items = $parent.find('.dropdown-menu' + desc)
//如果没有，则不做处理
if (!$items.length) return
//找出当前处理焦点状态的第一个下拉菜单项的索引
var index = $items.index(e.target)
//按向上箭头，index-1
if (e.which == 38 && index > 0) index--
//按向下箭头，index+1
if (e.which == 40 && index < $items.length - 1) index++
//当index为-1时，置为0
if (!~index) index = 0
//给所选择的菜单项设置焦点
$items.eq(index).trigger('focus')
}
【4】jQuery插件定义
function Plugin(option) {
//根据选择器，遍历所有符合规则的元素
return this.each(function () {
var $this = $(this)
//获取自定义属性bs.dropdown的值
var data = $this.data('bs.dropdown')
//如果值不存在，则将Dropdown实例设置为bs.dropdown值
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
//如果option传递了string，则表示要执行某个方法
if (typeof option == 'string') data[option].call($this)
})
}
var old = $.fn.dropdown
//保留其他库的$.fn.modal代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
$.fn.dropdown = Plugin
//重设插件构造器，可以通过该属性获取插件的真实类函数
$.fn.dropdown.Constructor = Dropdown
【5】防冲突处理
$.fn.dropdown.noConflict = function () {
//恢复以前的旧代码
$.fn.dropdown = old
//将$.fn.dropdown.noConflict()设置为Bootstrap的Dropdown插件
return this
}
【6】绑定触发事件
$(document)
//为声明式的HTML绑定单击事件，在单击以后先关闭所有的下拉菜单
.on('click.bs.dropdown.data-api', clearMenus)
//如果内部有form元素，则阻止冒泡，不做其他处理
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
//绑定单击事件，执行toggle()方法
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
//绑定键盘keydown事件，执行keydown()方法
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
//为dropdown-menu绑定键盘keydown事件，执行keydown()方法
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)위 내용은 Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제