부트 스트랩을 사용하여 배경을 만들 때 반응 형 내비게이션 막대가 사용됩니다. 그중에서도 드롭 다운 구성 요소가 더 자주 사용됩니다. 더 많이 사용할수록 클릭해야합니다. 드롭 다운은 기본적으로 왼쪽 마우스 버튼을 확장합니다. 마우스를 사용하여 확장 (호버)을 사용하면 클릭 시간을 절약하여 효율성을 향상시킬 수 있습니다.
원래 변환 아이디어는 다음과 같습니다. 호버 이벤트를 드롭 다운 요소에 바인딩하십시오. 호버가 올라가면 요소의 클릭 이벤트, 즉 호버를 클릭으로 동기화하고 호버가 클릭됩니다.
그러나 직접 리모델링하는 대신 기성품 플러그인이 있는지 확인하는 것이 좋습니다. 물론, 나는 그것을 검색하고 Github : View에서 호스팅 된 코드 URL
여기에서 코드를 복사합니다.
; (함수 ($, 창, 정의되지 않은) {// jQuery 플러그인의 범위를 벗어나 // 모든 Dropdownsvar $ AllDropdowns = $ ()를 추적합니다. 부모 $ alldropdowns = $ alldropdowns.add (this.parent ()); retract this.each (function () {var $ this = $ (this) .parent (), defaults = {deliday : 500, inderallycloseothers : true}, data = {delay : $ (this) .data ( 'delain' ', interally close : $ aterently attent (close). $ .extend (true, {{}, 기본값, 옵션, 데이터), timeout; $ this.Hover (function () {옵션 (옵션. {$ this.removeClass ( 'Open');}, 옵션 .delay);});});}); $ ( '[data-hover = "dropdown"]'). DropDownHover ();} (jQuery, this);저자가 플러그인 앞에 세미콜론을 추가했음을 알 수 있습니다. 이전 JS 코드가 작성되지 않을 수 있으므로 플러그인의 호환성을 증가시킵니다. 세미콜론이 여기에 추가되지 않으면 라인 브레이크가 없기 때문에 JS 오류가 발생할 수 있습니다.
플러그인은 HTML 요소 데이터-* 매개 변수 전송을 지원하며 초기화 매개 변수 전송도 지원합니다. 이 JS 코드를 Bootstrap의 원래 JS 코드 뒤에 배치하십시오.
위의 것은 Bootstrap의 드롭 다운 드롭 다운 메뉴를 호버 트리거로 변경하기위한 편집기 소개입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!