마우스 호버에 직접 표시되도록 Bootstrap의 드롭다운 메뉴 수정 [원본]_javascript 기술
May 16, 2016 pm 03:05 PM
bootstrap
드롭다운 메뉴
최근 우리 회사에서 웹 페이지를 만들 때 부트스트랩의 메뉴 기능을 사용했습니다. 마우스를 올리면 보조 메뉴가 표시되도록 하려고 검색을 해보니 아마도 두 가지 방법이 있는 것 같습니다.
첫 번째 방법: 스타일 시트 수정
사실, 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');
});
이 방법을 사용하면 상단 메뉴를 클릭할 수 있을 뿐만 아니라 스타일이 손실되지 않습니다. 부트스트랩 마우스 오버 문제도 해결할 수 있으므로 누구나 사용하는 것이 좋습니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7308
9


자바 튜토리얼
1623
14


Cakephp 튜토리얼
1344
46


라라벨 튜토리얼
1259
25


PHP 튜토리얼
1207
29



대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위
