JS Dropdown (dropdown.js)
드롭 다운 메뉴는 사용자가 미리 정의 된 목록에서 하나의 값을 선택할 수있는 토글 메뉴입니다.
드롭 다운에 대한 자습서를 들어, 우리의 읽기 Bootstrap 드롭 다운 자습서 .
드롭 다운 플러그인 클래스
| 수업 | 기술 | 예 |
|---|---|---|
| .dropdown | 드롭 다운 메뉴를 나타냅니다 | 시도 해봐 |
| .dropdown-menu | 드롭 다운 메뉴를 구축 | 시도 해봐 |
| .dropdown-menu-right | 드롭 다운 메뉴를 마우스 오른쪽 정렬 | 시도 해봐 |
| .dropdown-header | 드롭 다운 메뉴 내부 헤더를 추가합니다 | 시도 해봐 |
| .dropup | dropup 메뉴를 나타냅니다 | 시도 해봐 |
| .disabled | 드롭 다운 메뉴에서 항목을 비활성화 | 시도 해봐 |
| .divider | 수평 라인 드롭 다운 메뉴 내의 항목을 구분 | 시도 해봐 |
통해 data-* 속성
추가 data-toggle="dropdown" 링크 또는 드롭 다운 메뉴를 전환하는 버튼.
자바 스크립트를 통해
수동으로 사용 :
참고 : data-toggle="dropdown" 속성에 관계없이 호출 여부에 요구되는 dropdown() 방법.
드롭 다운 옵션
| None |
드롭 다운 방법
다음 표는 사용 가능한 모든 드롭 방법을 보여줍니다.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .dropdown("toggle") | 드롭 다운을 전환 | 시도 해봐 |
드롭 다운 이벤트
다음 표는 사용 가능한 모든 드롭 다운 이벤트를 보여줍니다.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| show.bs.dropdown | 드롭 다운이 표시하려고 할 때 발생합니다. | 시도 해봐 |
| shown.bs.dropdown | 드롭 다운이 완전히 표시 될 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
| hide.bs.dropdown | 드롭 다운 숨겨진하려고 할 때 발생합니다 | 시도 해봐 |
| hidden.bs.dropdown | 드롭 다운 완전히 숨길 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
팁 : jQuery의 사용 event.relatedTarget을 드롭 다운을 유발 요소를 얻을 :
예
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
}); »그것을 자신을 시도 
예
거꾸로에 캐럿 아이콘 변경
드롭 다운을 클릭하면 다음 예제에서는 위쪽 아래쪽을 가리키는에서 캐럿 아이콘을 변경합니다
예
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown
<span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown",
function(){
$(".btn").html('Dropdown <span
class="caret caret-up"></span>');
});
});
</script> »그것을 자신을 시도 Navbar를 함께 드롭 다운
다음은 탐색 모음에서 버튼의 드롭 다운 메뉴를 추가합니다 :
예
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav> »그것을 자신을 시도 다음 예제는 네비게이션 바에서 로그인 폼에 드롭 다운 메뉴를 추가합니다 :
예
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span
class="glyphicon glyphicon-log-in"></span></a>
<div
class="dropdown-menu">
<form
id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div
class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button
type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul> »그것을 자신을 시도 멀티 레벨 드롭 다운
이 예에서, 우리는 클릭에 멀티 레벨 드롭 다운을 열려면 jQuery를 사용 :
예
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> »그것을 자신을 시도 이 예에서, 우리는 사용자 정의 만든 .dropdown-submenu 멀티 레벨 드롭 다운을위한 클래스를 :
예
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top:
-1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> »그것을 자신을 시도