부트스트랩 JS 드롭다운
드롭다운 CSS 클래스
드롭다운에 대한 튜토리얼은 부트스트랩 드롭다운 튜토리얼 을 읽어보세요 .
| Class | Description | Example |
|---|---|---|
.dropdown |
Indicates a dropdown menu | |
.dropdown-item |
Style links inside the dropdown menu with proper padding etc | |
.dropdown-item-text |
Style text or text links inside the dropdown menu with proper padding etc | |
.dropdown-menu |
Builds the dropdown menu | |
.dropdown-menu-right |
Right-aligns a dropdown menu | |
.dropdown-header |
Adds a header inside the dropdown menu | |
.dropup |
Indicates a dropup menu | |
.disabled |
Disables an item in the dropdown menu | |
.active |
Styles the active element in a dropdown menu | |
.divider |
Separates items inside the dropdown menu with a horizontal line |
데이터-* 속성을 통해
링크 또는 버튼에 추가 data-toggle="dropdown"하여 드롭다운 메뉴를 전환합니다.
예시
<button type="button" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</button>
자바스크립트를 통해
다음을 사용하여 수동으로 활성화:
예시
$('.dropdown-toggle').dropdown();
참고: data-toggle="dropdown" 속성은 dropdown() 메서드를 호출하는지 여부에 관계없이 필요합니다.
드롭다운 옵션
| None |
드롭다운 방법
다음 표에는 사용 가능한 모든 드롭다운 방법이 나열되어 있습니다.
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown. If set, it will open the dropdown menu by default | |
| .dropdown("update") | Updates the position of an element's dropdown | |
| .dropdown("dispose") | Destroys an element's dropdown |
드롭다운 이벤트
다음 표에는 사용 가능한 모든 드롭다운 이벤트가 나열되어 있습니다.
| Event | Description | Try it |
|---|---|---|
| show.bs.dropdown | Occurs when the dropdown is about to be shown. | |
| shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | |
| hide.bs.dropdown | Occurs when the dropdown is about to be hidden | |
| hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) |
팁: jQuery의 event.relatedTarget 을 사용하여 드롭다운을 트리거한 요소를 가져옵니다.
예시
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});