부트 스트랩 드롭 다운 메뉴 장에서는 드롭 다운 메뉴를 설명하지만 상호 작용 부분이 포함되지 않습니다. 이 장에서는 드롭 다운 메뉴의 상호 작용에 대해 자세히 설명합니다. 드롭 다운 플러그인을 사용하면 모든 구성 요소 (예 : 탐색 막대, 탭, 캡슐 내비게이션 메뉴, 버튼 등)에 드롭 다운 메뉴를 추가 할 수 있습니다.
플러그인의 기능을 별도로 참조하려면 dropdown.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
1. 사용법
드롭 다운 메뉴 (드롭 다운) 플러그인의 숨겨진 내용을 전환 할 수 있습니다.
1. 데이터 속성 사용 : 아래와 같이 드롭 다운 메뉴를 전환하기 위해 링크 또는 버튼에 Data-Toggle = "Dropdown"을 추가하십시오.
<div> <a data-toggle = "dropdown"href = "#"> 드롭 다운 트리거 </a> <ul 역할 = "menu"aria-labelledby = "dlabel"> ... </ul> </div>
링크를 그대로 유지 해야하는 경우 (브라우저가 JavaScript를 활성화 할 때 유용) href = "#"대신 데이터 표적 속성을 사용하십시오.
<div> <a id = "dlabel"role = "button"data-toggle = "dropdown"data-target = "#"href = "/page.html"> 드롭 다운 메뉴 (드롭 다운) <Span> </span> </a> <ul 역할 = "메뉴"aria-labelledby = "dlabel"> .../ul> </ul> div>
2. JavaScript를 통해 : JavaScript를 통해 전환하려면 다음 방법을 사용하십시오.
$ ( '. Dropdown-Toggle'). 드롭 다운 ()
2. 드롭 다운 메뉴의 간단한 예
일반적으로 코드는 구성 요소 방법과 동일합니다.
// 선언적 사용법 <div> <버튼 데이터-토글 = "드롭 다운"> 드롭 다운 메뉴 <span> </span> </button> <ul> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> products </a> </li> <li> <a href = "#"</li>>>>>>>>>>>>>/li>> <li> href = "#"> 정보 </a> </li> </ul> </div>
선언적 사용의 핵심 핵심 :
1. 주변 컨테이너에 패키지를 사용하십시오.
2. 내부 클릭 버튼 이벤트의 바인딩 데이터 토글 = "드롭 다운";
3. 메뉴 요소를 사용하십시오.
// 버튼이 컨테이너 외부에 있으면 데이터 타겟을 통해 바인딩 할 수 있습니다. <button id = "btn"data-toggle = "dropdown"data-target = "#dropdown"> JavaScript 호출에는 속성이 없으며 메소드를 사용하기 쉽지 않습니다. 다음은 네 가지 기본 이벤트입니다. // 메뉴 메소드를 드롭 다운하지만 여전히 데이터가 필요합니다-*$ ( '#btn'). dropdown (); $ ( '#btn'). dropdown ( 'toggle');
드롭 다운 메뉴는 4 가지 종류의 이벤트가 팝업 전, 팝업 후, 닫기 전 및 마감 후에 해당하는 4 가지 종류의 이벤트를 지원합니다.
// 이벤트, 기타 유사한 $ ( '#dropdown'). on ( 'show.bs.dropdown', function () {alert ( '쇼 메소드가 호출 될 때 즉시 freaks!');});3. 탭 페이지에서 드롭 다운 메뉴 사용
<! docType html> <html> <head> <title> bootstrap 인스턴스 - 드롭 다운 메뉴가있는 태그 페이지 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <p> 드롭 다운 메뉴가있는 태그 페이지 </p> <ul> <li> <a href = "#"> home </a> <li> <a href = "#"> svn </a> <li> <a href = "#"> ios </a> </a> </li> <li> <a href = "#"> vb.net </a> <li> <a data-toggle = "dropdown"href = "#"> java <span> </span> </a> <ul> <li> <a href = "#"> href = "#"> jmeter </a> </a> </li> <li> <a href = "#"> ejb </a> </a> <li> <a href = "#"> 서명 된 링크 </a> </li> </li> <li> <a href = "#"> php </ht> </ht> </ht> </ht> </ht> </ht> </ht
생식 이미지 :
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.