항목 클릭 시 부트스트랩 반응 메뉴를 자동으로 닫는 방법은 무엇입니까?

Bootstrap: 메뉴 항목 클릭 시 반응형 메뉴 자동 닫기

Bootstrap에서 반응형 메뉴를 표시할 때 메뉴를 자동으로 닫고 싶을 수도 있습니다 데스크톱에서 열린 상태를 유지하면서 모바일 또는 태블릿 장치에서 메뉴 항목을 클릭한 후.

문제:

사용자가 $('.btn)를 사용하려고 시도했습니다. -navbar').click(); 그리고 $('.nav-collapse').toggle(); 이 동작을 수행했지만 데스크탑에서 메뉴가 예기치 않게 축소되었습니다.

해결책:

이 문제를 해결하려면 데이터 전환을 포함하도록 메뉴 항목을 수정하십시오. Navbar 토글 버튼과 마찬가지로 데이터 대상 속성도 있습니다. 예를 들어, "제품" 메뉴 항목의 경우:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

각 메뉴 항목에 대해 이를 반복합니다.

추가 수정:

주소 오버플로 문제 및 깜박임이 발생하는 경우 다음 코드를 추가하세요.

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

이렇게 하면 토글 및 대상 선택기가 화면 크기에 맞게 설정되어 더 큰 메뉴의 결함이 제거됩니다.

부트스트랩 버전 업데이트:

• Bootstrap v4.1.3 & v5.0: 표시/숨겨진 클래스를 d-none d-sm-block 및 d-block d-sm으로 교체 -none.
• Bootstrap v5: data-toggle을 data-bs-toggle로 바꾸고 data-target을 data-bs-target으로 바꾸세요.

구현함으로써 이러한 수정을 통해 데스크톱 장치에서 해당 기능을 유지하면서 메뉴 항목 클릭 시 반응형 메뉴를 자동으로 닫을 수 있습니다.

위 내용은 항목 클릭 시 부트스트랩 반응 메뉴를 자동으로 닫는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!