Bootstrap 의 dropdown-menu 를 취소 하고 기본 종료 이벤트 방법 을 누 르 십시오.
제 가 div 에서 만 든 것 은 다단 계 목록 입 니 다.목록 을 여러 번 클릭 하여 해당 하 는 목록 항목 을 찾 아야 합 니 다.Bootstrap 은 기본적으로 dropdown-menu 에서 한 번 클릭 하면 사라 집 니 다.
오른쪽 단 추 를 누 르 면 다단 계 목록 이 팝 업 됩 니 다.
코드 는 다음 과 같 습 니 다:
<div class="dropdown">
<a href="#" rel="external nofollow" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<div class="dropdown-menu jq22-container">
<div id="treeview" class=""></div>
</div>
</div>첫걸음
dropdown-menu 에서 처리 해 야 할 요 소 는 data-stopPropagation="true"를 추가 합 니 다.data-stopPropagation 속성 은 클릭 할 때 이 벤트 를 전파 하지 않 습 니 다.그러면 우리 의 클릭 이 벤트 는 Bootstrap.js 에 전파 되 지 않 습 니 다.
두 번 째 단계
Bootstrap 의 stopPropagation()함 수 를 호출 하면 요소 가 클릭 할 때 이 벤트 를 전파 하 는 것 을 막 을 수 있 습 니 다.
나 는 내 코드 에 비교적 거 칠 게 썼 다.전체 treeview 에 click 사건 을 설명 하고 모두 stopPropagation()방법 을 연결 했다.
$(".treeview").on("click",function (e) {
e.stopPropagation();
})이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue.js + SCSS + Bootstrap + MaterialDesign + TypeScript 개발 환경을 만들려고했습니다.SPA 앱을 만들게 되었기 때문에, Vue.js를 사용하려고 환경을 만들어 보았습니다. Docker에서 개발하고 싶었던 언어는 TypeScript, SCSS에서 Bootstrap을 MaterialDesign에서. D...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
