마우스 호버에 직접 표시되도록 Bootstrap의 드롭다운 메뉴 수정 [원본]_javascript 기술

최근 우리 회사에서 웹 페이지를 만들 때 부트스트랩의 메뉴 기능을 사용했습니다. 마우스를 올리면 보조 메뉴가 표시되도록 하려고 검색을 해보니 아마도 두 가지 방법이 있는 것 같습니다.

첫 번째 방법: 스타일 시트 수정

사실, CSS를 추가하여 호버 상태를 설정하고 드롭다운 메뉴를 차단하도록 설정하기만 하면 됩니다.

코드 복사 코드는 다음과 같습니다.

.nav > li:hover .dropdown-menu {표시: 블록;}

이 CSS는 bootstrap.min.css 다음에 나타나는 CSS에 추가됩니다.

단점:
1. 해당 최상위 메뉴를 클릭할 수 없습니다
2. 마우스를 2차 메뉴로 슬라이드한 후, 최상위 메뉴에 스타일이 없습니다

두 번째 방법: JQuery의 기능을 사용하여

온라인 튜토리얼과 결합하면 JQuery의 두 가지 이벤트, 특정 CSS를 사용하여 문제를 해결할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//click.bs.dropdown.data-api 이벤트를 닫고 상단 메뉴를 클릭 가능하게 만듭니다
$(document).off('click.bs.dropdown.data-api');
//자동 확장
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//자동 종료
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});

이 방법을 사용하면 상단 메뉴를 클릭할 수 있을 뿐만 아니라 스타일이 손실되지 않습니다. 부트스트랩 마우스 오버 문제도 해결할 수 있으므로 누구나 사용하는 것이 좋습니다.