메뉴 링크를 클릭한 후에도 내 Bootstrap 3 축소 탐색이 계속 열려 있는 이유는 무엇입니까?

메뉴 링크를 클릭한 후에도 Bootstrap 3의 축소된 탐색이 계속 열려 있음

일반적인 Bootstrap 3 탐색 설정에서 축소된 메뉴의 메뉴 링크 클릭 메뉴가 자동으로 닫히도록 해야 합니다. 그러나 일부 사용자는 메뉴 링크 선택 후에도 메뉴가 계속 열려 있는 문제에 직면했습니다.

문제 이해

이 문제는 부트스트랩 축소의 기본 동작으로 인해 발생합니다. 플러그인은 트리거 버튼을 클릭할 때 요소의 가시성을 전환하는 것입니다. 이는 메뉴 링크를 포함하여 축소된 메뉴 자체 내부를 클릭해도 축소 작업이 실행되지 않음을 의미합니다.

해결책

이 문제를 해결하려면 JavaScript 이벤트 리스너가 필요합니다. 문서에 추가할 수 있습니다. 이 리스너는 사용자가 축소된 탐색 내부를 클릭하는 경우를 감지하고 자동으로 숨깁니다. 다음은 예제 코드입니다.

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

설명

• $(document).on은 선택기와 일치하는 요소를 클릭할 때 이벤트 리스너를 문서에 바인딩합니다. .navbar-collapse.in. 이렇게 하면 탐색이 접힐 때만 이벤트가 트리거됩니다.
• if 조건은 클릭한 요소(예: 대상)가 앵커 인지 여부를 확인합니다. 드롭다운 토글(".dropdown-toggle")이 아닌 태그입니다. 하위 메뉴에 액세스할 때 메뉴가 접히는 것을 방지하기 위해 드롭다운 토글이 제외됩니다.
• 조건이 충족되면 클릭한 요소에 Collapse('hide') 메소드가 호출되어 탐색이 접힙니다.

이 솔루션은 사용자가 메뉴 링크를 클릭할 때 축소된 메뉴가 자동으로 닫히도록 하여 원활하고 사용자 친화적인 탐색 환경을 제공합니다.

위 내용은 메뉴 링크를 클릭한 후에도 내 Bootstrap 3 축소 탐색이 계속 열려 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!