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

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

Barbara Streisand

풀어 주다： 2024-12-13 18:23:10

원래의

387명이 탐색했습니다.

How to Automatically Close a Bootstrap Navbar After Clicking a Link?

링크 클릭 시 Bootstrap Navbar를 닫는 방법

문제:

모바일 장치에서 접히는 Bootstrap navbar가 있습니다. , 그러나 사용자가 클릭하면 닫히기를 원합니다. 링크.

해결책:

Bootstrap 5(베타)

JavaScript 방법: 메뉴 항목에 클릭 이벤트 리스너를 추가하여 탐색 모음을 전환합니다. Collapse.

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() 
        })
    }
})

로그인 후 복사

데이터 속성 방법: data-bs-toggle="collapse" 및 data-bs-target=".navbar-collapse.show" 속성 추가 링크로.

<nav>
    <ul>
        <li>
            <a href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
        </li>
        ...
    </ul>
</nav>

로그인 후 복사

부트스트랩 4

jQuery 메서드: navbar-collapse 요소에 축소 메서드를 사용합니다.

<ul class="navbar-nav mr-auto">
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

로그인 후 복사

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

로그인 후 복사

데이터 속성 방법: 추가 data-toggle="collapse" 및 data-target=".navbar-collapse.show" 속성을 링크에 추가합니다.

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

로그인 후 복사

Bootstrap 3

데이터 속성 방법: data-toggle="collapse"를 추가하고 data-target=".navbar-collapse.show" 속성을 링크에 추가합니다.

<ul>
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

로그인 후 복사

jQuery 방법: navbar-collapse 요소에 축소 방법을 사용합니다. .

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

로그인 후 복사

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