Bootstrap에서 링크 클릭 시 접이식 Navbar가 자동으로 닫히도록 하려면 어떻게 해야 합니까?

링크 클릭 시 축소 가능한 Navbar가 자동으로 닫힙니다

Bootstrap 4를 사용하여 기능적인 축소 가능한 Navbar를 만들었습니다. 하지만 마음에 드실 겁니다 사용자가 링크를 선택하면 자동으로 닫힙니다. 이 문서에서는 원하는 동작을 달성하기 위해 Bootstrap 3 및 Bootstrap 4 모두에 대한 포괄적인 솔루션을 제공합니다.

Bootstrap 3에 대한 솔루션

Bootstrap 3에서는 다음 내의 링크를 수정할 수 있습니다. 'data-toggle' 속성을 통합하는 탐색 모음입니다. 이 속성은 링크를 클릭할 때 축소 동작을 트리거합니다.

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

이 솔루션은 축소 및 표시 클래스를 활용하여 탐색 모음의 가시성을 제어합니다.

Bootstrap 4용 솔루션

Bootstrap 4의 경우 "클릭 시 닫기"를 수행하는 두 가지 주요 방법이 있습니다.

옵션 1: jQuery 메서드

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

옵션 2: 데이터 속성이 있는 JavaScript 메서드

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

부트스트랩 솔루션 5

Bootstrap 5의 경우 이벤트 리스너가 있는 JavaScript 메서드 또는 데이터 속성 메서드를 사용할 수 있습니다.

이벤트 리스너가 있는 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() 
    })
  }
})

데이터 속성 방법

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">

위 내용은 Bootstrap에서 링크 클릭 시 접이식 Navbar가 자동으로 닫히도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!