부트 스트랩 드롭 다운 메뉴 (드롭 다운) 위젯

드롭 다운 메뉴 부트 스트랩 이 장에서는 구체적으로 드롭 다운 메뉴의 상호 작용을 설명 할 것,이 장에서는 드롭 다운 메뉴를 설명하지만, 상호 작용 부분 관련이 없습니다. 풀다운 메뉴 (드롭 다운) 플러그인, 당신은 (예 : 탐색 모음, 탭, 캡슐, 탐색 메뉴, 버튼 등)의 구성 요소에 드롭 다운 메뉴를 추가 할 수 있습니다를 사용합니다.

당신은 각각의 플러그인 기능을 참조하려면dropdown.js를 참조 할 필요가있다.또는, 부트 스트랩 플러그인 개요 장에서는 언급, 당신은bootstrap.js또는bootstrap.min.js의압축 된 버전을 참조 할 수있습니다.

용법

당신은 숨기기 드롭 다운 메뉴 (드롭 다운)를 전환 할 수 있습니다 플러그인 :

데이터 속성을 통해 다음과 같이 링크 나 버튼, 드롭 다운 메뉴 전환 "드롭 다운"= 데이터 토글을추가합니다 :

<사업부 클래스 = "드롭 다운">
  <a data-toggle="dropdown"보기 </a> 드롭 다운 메뉴 (드롭 다운) 트리거 </a>를
  <UL 클래스 = "드롭 다운 메뉴"역할 = "메뉴"아리아 - labelledby = "경우 dlabel">
    ...
  </ UL>
</ DIV>

당신이 (브라우저는 자바 스크립트를 사용할 수 없습니다 경우에 유용합니다) 그대로 링크를 유지해야하는 경우, 대신HREF = "#"의 데이터를 대상 속성을사용하십시오:

<사업부 클래스 = "드롭 다운">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    풀다운 메뉴 (드롭 다운)을 <스팬 클래스 = "캐럿"> </ SPAN>
  </a>를


  <UL 클래스 = "드롭 다운 메뉴"역할 = "메뉴"아리아 - labelledby = "경우 dlabel">
    ...
  </ UL>
</ DIV>

자바 스크립트 작성자 : 드롭 다운 메뉴를 호출하는 자바 스크립트 전환, 다음과 같은 방법을 사용하십시오 :
```
$ ( '. 드롭 다운-토글'). 드롭 다운 ()
```

예

탐색 모음에서

다음 예제는 네비게이션 바의 드롭 다운 메뉴를 사용하는 방법을 보여줍니다 :

예

<탐색 클래스 = "네비게이션 바 네비게이션 바 - 기본" 역할 = "탐색"> <사업부 클래스 = "컨테이너 유체"> <사업부 클래스 = "네비게이션 바 헤더"> <A 클래스 = "네비게이션 바 브랜드" HREF = "#"> 튜토리얼 </ A> </ DIV> <DIV> <UL 클래스 = "탐색 네비게이션 바-탐색" > <리 클래스> <A = "활성" HREF = "#"> 아이폰 OS < / A> </ 리> <LI> <A HREF = "#"> SVN < / A> </ 리> <리 클래스 = "드롭 다운"> <A HREF = "#" 클래스 = "드롭 다운-전환" 데이터 전환 = "드롭 다운"> 자바의 <b 클래스 = "캐럿"> </ B> </ A> <UL 클래스 = "드롭 다운 메뉴"> <LI> <A HREF = "#"> JMeter를 < / A> </ 리> <LI> <A HREF = "#"> EJB < / A> </ 리> <LI> <A HREF = "#"> 재스퍼 리포트 </ A> </ 리> <리 클래스 = "분배기"> </ 리> <LI> <A HREF = "#"> 고립 링크 </ A> </ 리> <리 클래스 = "분배기"> </ 리> <LI> <A HREF = "#"> 다른 격리 된 링크 </ A> </ 리> </ UL> </ 리> </ UL> </ DIV> </ DIV> </ 탐색>

»시도

결과는 다음과 같다 :

탭 내에서

다음은 드롭 다운 메뉴에서 탭을 사용하는 방법을 보여줍니다 :

예

<P> 페이지 풀다운 메뉴 태그 </ P> <UL 클래스 = "탐색의 탐색 - 탭" > <리 클래스 = "활성"> <A HREF = "#"> 홈 < / A> </ 리> <리> <A HREF = "#"> SVN < / A> </ 리> <리> <A HREF = "#"> 아이폰 OS < / A> </ 리> <리> <A HREF = "#"> VB.Net < / A> </ 리> <리 클래스 = "드롭 다운"> <A 클래스 = "드롭 다운-전환" 데이터 전환 = "드롭 다운" HREF = "#"> 자바 < 스팬 클래스 = "캐럿"> </ SPAN> </ A> <UL 클래스 = "드롭 다운 메뉴"> <리> <A HREF = "#"> 스윙 < / A> </ 리> <리> <A HREF = "#"> JMeter를 < / A> </ 리> <리> <A HREF = "#"> EJB < / A> </ 리> <리 클래스 = "분배기"> </ 리> <리> <A HREF = "#"> 고립 링크 </ A> </ 리> </ UL> </ 리> <리> <A HREF = "#"> PHP < / A> </ 리> </ UL>

»시도

결과는 다음과 같다 :

옵션

옵션은 없습니다.

방법

드롭 다운 메뉴를 드롭 다운 메뉴를 표시하거나 숨길 수있는 간단한 방법이 전환.

$ (). 드롭 다운 ( '토글')

예

다음의 예는 풀다운 메뉴 (드롭 다운) 플러그인 방법을 보여줍니다

예

<탐색 클래스 = "네비게이션 바 네비게이션 바 - 기본" 역할 = "탐색"> <사업부 클래스 = "컨테이너 유체"> <사업부 클래스 = "네비게이션 바 헤더"> <A 클래스 = "네비게이션 바 브랜드" HREF = "#"> W3Cschool < / A> </ DIV> <사업부 ID = "을 myexample"> <UL 클래스 = "탐색 네비게이션 바-탐색" > <리 클래스 = "활성"> <A HREF = "#"> 아이폰 OS < / A> </ 리> <리> <A HREF = "#"> SVN < / A> </ 리> <리 클래스 = "드롭 다운"> <A HREF = "#" 클래스 = "드롭 다운-전환" 데이터 전환 = "드롭 다운"> 자바의 <b 클래스 = "캐럿"> </ B> </ A> <UL 클래스 = "드롭 다운 메뉴"> <리> <A 아이디 = "행동-1" HREF = "#"> JMeter를 < / A> </ 리> <리> <A HREF = "#"> EJB < / A> </ 리> <리> <A HREF = "#"> 재스퍼 리포트 </ A> </ 리> <리 클래스 = "분배기"> </ 리> <리> <A HREF = "#"> 고립 링크 </ A> </ 리> <리 클래스 = "분배기"> </ 리> <리> <A HREF = "#"> 다른 격리 된 링크 </ A> </ 리> </ UL> </ 리> </ UL> </ DIV> </ DIV> </ 탐색> </ DIV> <script> $ (함수 () {$ ( "드롭 - 토글.") 드롭 다운 ( '토글');}); </ SCRIPT>

»시도

결과는 다음과 같다 :