링크 클릭 시 축소 가능한 부트스트랩 Navbar를 닫는 방법은 무엇입니까?

클릭 시 축소 가능한 Bootstrap Navbar 닫기

Bootstrap 5(베타)

• JavaScript를 활용하여 메뉴 항목을 닫는 이벤트 리스너를 추가합니다. navbar를 축소합니다.

Bootstrap 4

• 데이터 토글을 사용하여 링크에 축소 구성 요소를 추가하거나 제어를 위해 jQuery를 활용합니다.

부트스트랩 3

• 데이터 전환을 사용하여 링크에 축소 구성 요소를 포함하거나 jQuery를 사용하여 링크 클릭 시 탐색 모음을 숨깁니다.

여기 Bootstrap에 대한 자세한 솔루션이 있습니다. 3:

markup:

<ul class="navbar-nav mr-auto">
     <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#about-us">About</a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#pricing">Pricing</a>
     </li>
</ul>

jQuery:

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

이 방법은 다음 이후에 접을 수 있는 navbar를 숨깁니다. 링크를 클릭하면 사용자 경험과 탐색 흐름이 향상됩니다.

위 내용은 링크 클릭 시 축소 가능한 부트스트랩 Navbar를 닫는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!