링크 클릭 후 축소 가능한 부트스트랩 Navbar를 자동으로 닫는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-12-17 00:54:25

원래의

145명이 탐색했습니다.

How to Automatically Close a Collapsible Bootstrap Navbar After Link Click?

클릭 시 접을 수 있는 Bootstrap 4 Navbar를 숨기는 방법

문제:

부드럽게 열리지만 이후에도 계속 열려 있는 접이식 부트스트랩 탐색 모음을 만들었습니다. 다른 섹션으로 이동합니다. 사용자가 링크를 클릭하면 자동으로 닫히기를 원합니다.

해결책:

Bootstrap 5(베타):

사용 JavaScript:

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false})
navLinks.forEach((l) => {
    if (menuToggle.classList.contains('show')) {  // only fire on mobile
        l.addEventListener('click', () => { 
            bsCollapse.toggle() 
        })
    }
})

로그인 후 복사

데이터 속성 사용:

<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>

로그인 후 복사

Bootstrap 4:

사용 jQuery:

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

로그인 후 복사

데이터 속성 사용:

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

로그인 후 복사

Bootstrap 3:

사용 jQuery:

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

로그인 후 복사

데이터 속성 사용:

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

로그인 후 복사

이러한 방법 중 하나를 구현하면 사용자가 클릭할 때마다 축소 가능한 Bootstrap navbar가 닫힙니다. 링크를 통해 원활하고 사용자 친화적인 탐색 경험을 제공합니다.

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