웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
부트스트랩(UI Bootstrap)을 사용하여 드랍다운(Dropdown) 박스 형태의 인터페이스를 구현한 뒤 메뉴를 선택할 경우 드랍다운 메뉴가 닫혀야하나 닫히지 않는 경우가 발생할 수 있습니다.
이 문제는 ng-click이 설정된 경우 드랍다운 메뉴를 컨트롤하는 이벤트 보다 먼저 실행되어 나타나는 이슈로 이를 해결하기 위한 방법으로 아래와 같은 방법이 존재합니다.
# dropdown-toggle 디렉티브 추가하기
아래와 같이 해당하는 a 태그에 추가로 dropdown-toggle 디렉티브(속성)를 추가하는 방법이 가장 간단한 방법입니다.
dropdown-toggle 디렉티브를 추가하는 방법이 가장 간단하고 쉬운 방법입니다. 또 다른 방법으로 a 태그를 다른 태그(Ex. span)로 변경하는 방법이 있습니다. 예를들면...
# a 태그를 다른 태그로 대체하는 방법
아래의 예제는 a 태그를 span 태그로 대체하였습니다.
이 문제는 ng-click이 설정된 경우 드랍다운 메뉴를 컨트롤하는 이벤트 보다 먼저 실행되어 나타나는 이슈로 이를 해결하기 위한 방법으로 아래와 같은 방법이 존재합니다.
# dropdown-toggle 디렉티브 추가하기
아래와 같이 해당하는 a 태그에 추가로 dropdown-toggle 디렉티브(속성)를 추가하는 방법이 가장 간단한 방법입니다.
<li>
<a dropdown-toggle ng-click="event01">Menu 01</a>
<a dropdown-toggle ng-click="event02">Menu 02</a>
</li>dropdown-toggle 디렉티브를 추가하는 방법이 가장 간단하고 쉬운 방법입니다. 또 다른 방법으로 a 태그를 다른 태그(Ex. span)로 변경하는 방법이 있습니다. 예를들면...
# a 태그를 다른 태그로 대체하는 방법
아래의 예제는 a 태그를 span 태그로 대체하였습니다.
<!-- 변경 전 코드 -->
<li>
<a ng-click="event01">Menu01</a>
</li>
<!-- 아래처럼 변경 후 적용하기 -->
<li>
<span ng-click="event01">Menu01</a>
</li>코드 스니펫 widget
아래의 글도 찾고 계시지 않나요?