부트스트랩 드롭다운이 클릭 시 닫히지 않도록 유지하는 방법

드롭다운 메뉴를 열어두고 다른 곳을 클릭하면 자동으로 닫히는 동작을 한 번쯤은 보셨을 것입니다. 기본적으로 부트스트랩은 드롭다운 외부 영역을 클릭하면 메뉴를 즉시 닫도록 설계되어 있습니다.

hide.bs.dropdown 이벤트로 드롭다운 열린 상태 유지하기

클릭한 후에도 드롭다운 메뉴가 닫히지 않고 계속 열려 있게 하려면 아래 코드처럼 hide.bs.dropdown 이벤트에서 false를 반환하면 됩니다.

$('#myDropdown').on('hide.bs.dropdown', function () {
    return false;
});

이 방식은 드롭다운이 닫히려는 순간에 기본 동작을 차단하여, 사용자가 메뉴 내부의 체크박스나 버튼 등을 자유롭게 조작할 수 있도록 해줍니다.

stopPropagation()으로 클릭 이벤트 직접 처리하기

또 다른 방법은 클릭 이벤트를 직접 처리하는 것입니다. 다음 코드처럼 드롭다운 메뉴 영역에서 발생하는 클릭 이벤트에 대해 event.stopPropagation() 메서드를 호출할 수 있습니다.

$('#myDropdown .dropdown-menu').on({
    "click": function(e) {
        e.stopPropagation();
    }
});

event.stopPropagation() 메서드는 이벤트가 부모 요소로 전파(버블링)되는 것을 막아 줍니다. 그 결과 상위 요소에 등록된 이벤트 핸들러가 실행되지 않으므로, 드롭다운 외부 클릭 감지 로직이 동작하지 않아 메뉴가 열린 상태로 유지됩니다.

정리

• hide.bs.dropdown + return false: 드롭다운 닫힘 동작 자체를 차단하는 가장 간단한 방법입니다.
• stopPropagation(): 메뉴 내부의 클릭 이벤트가 문서 레벨까지 전달되지 않도록 하여 닫힘을 방지합니다.

두 방법 모두 실무에서 널리 사용되며, 상황에 따라 선택해서 적용하면 됩니다. 특히 드롭다운 안에 폼 요소나 여러 개의 인터랙티브 컨트롤이 들어가는 경우 위 기법이 매우 유용합니다.