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>
이렇게 하면 토글 및 대상 선택기가 화면 크기에 맞게 설정되어 더 큰 메뉴의 결함이 제거됩니다.
부트스트랩 버전 업데이트:
구현함으로써 이러한 수정을 통해 데스크톱 장치에서 해당 기능을 유지하면서 메뉴 항목 클릭 시 반응형 메뉴를 자동으로 닫을 수 있습니다.
위 내용은 항목 클릭 시 부트스트랩 반응 메뉴를 자동으로 닫는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!