최근에 회사는 부트 스트랩 메뉴 기능을 사용하여 웹 페이지를 만들었습니다. 보조 메뉴를 표시하려면 마우스를 호버해야했기 때문에 연구를 연구하고 아마도 두 가지 방법이 있음을 발견했습니다.
첫 번째 방법 : 스타일 시트를 수정하십시오
사실, 그것은 비교적 간단합니다. 호버 상태를 설정하려면 CSS를 추가하고 드롭 다운 메뉴를 차단하도록 설정하면됩니다. 특정 CSS의 경우 :
코드 사본은 다음과 같습니다.
.nav> li : hover .dropdown-menu {display : block;}
이 문장 CSS는 bootstrap.min.css 이후에 나타나는 CSS에 추가됩니다.
결점:
1. 해당 상단 메뉴를 클릭 할 수 없습니다
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');
});
이 방법을 사용하면 상단 메뉴를 클릭 할 수있을뿐만 아니라 스타일을 잃을 수는 없으며 부트 스트랩 마우스 호버링 문제를 해결합니다. 모든 사람에게 권장됩니다.