링크 클릭 시 Bootstrap 3 축소 메뉴를 닫는 방법은 무엇입니까?

링크 클릭 시 Bootstrap 3 축소 메뉴를 닫는 방법

Bootstrap 3의 축소된 탐색 메뉴는 탐색 항목을 숨기고 표시하는 편리한 방법을 제공합니다. 더 작은 장치. 단, 메뉴가 펼쳐진 상태에서 메뉴 링크를 클릭하면 클릭 시 메뉴 링크가 닫히지 않을 수 있습니다. 이는 쉬운 탐색을 방해하므로 사용자에게 실망스러울 수 있습니다.

해결책

이 문제를 해결하려면 문서에 다음 코드를 추가할 수 있습니다.

$(document).on('click', '.navbar-collapse.in', function(e) {
  if ($(e.target).is('a:not(".dropdown-toggle")')) {
    $(this).collapse('hide');
  }
});

이 코드는 축소된 메뉴 내의 클릭을 수신하고 대상 요소가 드롭다운 토글이 아닌 경우 메뉴를 닫습니다. 드롭다운 토글을 제외하면 드롭다운 메뉴를 클릭해도 메뉴가 닫히지 않습니다.

구현

이 솔루션을 구현하려면 JavaScript 파일을 다운로드하거나 페이지 하단의 닫는 태그.

추가 참고 사항

• 대상이 'a' 요소인지만 확인하는 GitHub의 원래 솔루션은 하위 문제를 일으킬 수 있습니다. 메뉴. 업데이트된 버전에서는 이를 방지하기 위해 대신 'a:not(".dropdown-toggle")'을 확인합니다.
• 이 솔루션은 Bootstrap 3.x에만 적용됩니다. Bootstrap 4 이상에서는 .in 클래스가 .show로 대체되었습니다.

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