부트 스트랩 내비게이션 바의 드롭 다운 구성 요소는 매우 자주 사용됩니다. 이 기사는 부트 스트랩에서 드롭 다운 구성 요소 확장 호버 이벤트를 소개합니다. 특정 내용은 다음과 같습니다
이 호버 이벤트를 구현하는 방법은 무엇입니까? 실제로 드롭 다운 구성 요소의 클릭 이벤트를 기반으로 완료하기 쉽습니다. 주의를 기울인 사람들은 드롭 다운 상자가 나타날 때 부모가 열린 클래스 속성을 갖게 될 것임을 알 수 있습니다. 호버 이벤트를들을 때 오픈 클래스를 부모에게만 추가하거나 삭제하면됩니다.
boostrap-hover-dropdown.js 플러그인, github : view에서 호스팅 된 코드 URL
다음은 완전한 JS 플러그인 코드입니다.
// 부트 스트랩 응답 내비게이션 바 <br>; (function ($, wind //은 드롭 다운-토글의 부모 $ allDropdowns = $ allDropdowns.add (this.parent ()); each () {var $ this = $ (this). $ (이) {timeout = settimeout () {$ this.removeclass ( 'open');};저자가 플러그인 앞에 세미콜론을 추가했음을 알 수 있습니다. 이전 JS 코드가 작성되지 않을 수 있으므로 플러그인의 호환성을 증가시킵니다. 세미콜론이 여기에 추가되지 않으면 라인 브레이크가 없기 때문에 JS 오류가 발생할 수 있습니다.
선택적 매개 변수
지연 : (선택적 매개 변수) 밀리 초의 지연. 마우스가 더 이상 드롭 다운 메뉴 나 버튼/탐색 항목에 있지 않기 전에 풀다운을 닫을 때입니다. 기본값은 500입니다.
inderallyCloseothers : (선택적 매개 변수) 부울 값은 True 인 경우 새 선택기 일치 내비게이션을 시작할 때 즉시 다른 드롭 다운 메뉴를 닫습니다. 기본값은 참입니다.
위의 JS 코드를 추가 한 후에는 다른 단계를 수행해야하기 때문에이 시점에서 효과를 실현할 수 없습니다. 이는 요소에 데이터를 추가하는 것입니다.
데이터 호버 = "드롭 다운"
HTML 요소 코드 완료 :
다음과 같이 코드를 복사하십시오. <a href = "javaScript :;" data-toggle = "dropdown"data-hover = "dropdown"> </a>
데이터 속성 또는 데이터 지연 및 데이터 클로즈 어스를 통해 옵션을 설정할 수 있습니다.
다음과 같이 코드를 복사하십시오. <a href = "#"data-toggle = "dropdown"data-hover = "dropdown"data-delay = "1000"data-close-shothers = "false"> </a>
물론, 가장 쉬운 방법도 있습니다.이 방법은 CSS 호버를 사용하여 제어 할 수 있습니다.
[/code] .nav> li : hover .dropdown-menu {display : block;} [/code]
이러한 종류의 코드는 또한 원하는 호버 효과를 달성 할 수 있지만 호버링 할 때 구성 요소를 클릭 한 다음 다른 구성 요소로 이동하면 호버로 이동하면 다음 효과가 나타납니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위는 귀하와 공유 한 부트 스트랩 드롭 다운 구성 요소를 사용하는 방법입니다. 호버 이벤트를 마스터하는 것이 도움이되기를 바랍니다.