[bootstrap] 부트스트랩 – 드롭다운(dropdown)

다른 플러그인처럼 data- 속성과 자바스크립트로 구현할 수 있으며 모바일 기기에서는 드롭다운을 열면 메뉴 이외의 영역을 탭해도 드롭다운이 닫히게 .doropdown-backdrop 클래스가 추가됩니다. 따라서, 하나의 드롭다운이 열린 상태에서 다른 드롭다운을 열려면 우선 빈 곳을 탭 한 후에 해야 하며 data-toggle=”dropdown” 속성은 반드시 포함해야 합니다.

<div class=”dropdown” id=”mydropdown“>
<button class=”btn btn-default dropdown-toggle” type=”button” id=”dropdownMenu1″ data-toggle=”dropdown“ aria-expanded=”true”>
Dropdown
<span class=”caret”></span>
</button>
<ul class=”dropdown-menu” role=”menu” aria-labelledby=”dropdownMenu1″>
…
</ul>
</div>

 

button 태그가 아닌 a 태그를 사용할 때는 링크를 표시하기 위해 href=”#”를 사용하지 않고 data-target=”#”과 사이트 도메인을 href에 추가합니다.

 

<div class=”dropdown”>
<a id=”dLabel” data-target=”#” href=”http://naver.com” data-toggle=”dropdown” aria-haspopup=”true” role=”button” aria-expanded=”false“>
Dropdown trigger
<span class=”caret“></span>
</a>
<ul class=”dropdown-menu” role=”menu” aria-labelledby=”dLabel”>
…
</ul>
</div>

 

자바스크립트를 이용해 드롭다운을 활성화 하려면 다음과 같은 형태로 사용합니다.

$(“.dropdown-toggle”).dropdown();
$(“.dropdown-toggle”).dropdown(“toggle”);

 

이벤트는 4가지가 있으며 다음과 같이 .dropdown  선택자가 있는 곳에 id를 추가하고 사용합니다.
자바스크립트는 다음과 같습니다.

$(“#mydropdown“).on(“show.bs.dropdown“, function() {
alert(“이벤트 실행됨”);
});

 

.show.bs.modal : 드롭다운이 나타나기 전에 alert 메시지가 나타납니다.
.show.bs.modal : 드롭다운이 나온 후에 alert 메시지가 나타납니다.
.hide.bs.modal : 드롭다운이 닫히기 전에 alert 메시지가 나타납니다.
.hide.bs.modal : 드롭다운이 닫힌 후에 alert 메시지가 나타납니다.