클릭 시 부트스트랩 반응형 메뉴를 닫는 방법은 무엇입니까?

클릭 시 부트스트랩 반응형 메뉴 닫기

모바일 기기에서 웹사이트를 볼 때 탐색 메뉴 사용이 번거로울 수 있습니다. 사용자 경험을 향상시키려면 메뉴 항목을 클릭할 때 반응형 navbar를 자동으로 닫고 원하는 콘텐츠만 표시하는 것이 바람직합니다.

그러나 $('.btn-navbar').click( ) 또는 $('.nav-collapse').toggle()은 메뉴가 일시적으로 축소되는 등 데스크톱 보기에 바람직하지 않은 영향을 미칠 수 있습니다. 보다 효율적인 솔루션을 위해 다음 조치를 고려하십시오.

데이터 속성 선택기 사용

메뉴 항목을 클릭할 때 반응형 메뉴가 닫히도록 지정하려면 data-toggle="collapse" 및 다음과 같이 data-target=".navbar-collapse" 속성을 해당 요소에 추가합니다. 예:

<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>

메뉴 항목에 화면 크기별 클래스를 할당하면 이러한 문제를 효과적으로 해결하여 장치에 관계없이 원활한 작동을 보장합니다. size.

Bootstrap 버전 업데이트

Bootstrap v4.1.3 및 v5.0의 경우 표시/숨겨진 클래스는 d-none/d-sm-block 및 d-block으로 대체되어야 합니다. /d-sm-none입니다.

Bootstrap v5에서 data-toggle 및 data-target 속성을 다음으로 바꾸세요. data-bs-toggle 및 data-bs-target이 각각 있습니다.

이러한 지침을 따르면 메뉴 항목을 클릭할 때 반응형 Bootstrap 탐색 메뉴가 자동으로 닫혀 향상된 사용자 경험을 제공할 수 있습니다.

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