[JQUERY] 클릭 안쪽에 드롭 다운 메뉴 가까이하지 마십시오
JQUERY클릭 안쪽에 드롭 다운 메뉴 가까이하지 마십시오
해결법
-
1.데이터 속성 데이터 토글 = "드롭"를 제거하고 개방 구현 / 클로즈 드롭의 용액 일 수있다.
데이터 속성 데이터 토글 = "드롭"를 제거하고 개방 구현 / 클로즈 드롭의 용액 일 수있다.
먼저이 같은 열기 / 닫기 드롭 다운 링크에 클릭을 처리하여 :
$('li.dropdown.mega-dropdown a').on('click', function (event) { $(this).parent().toggleClass('open'); });다음과 같이 닫습니다 드롭 다운의 외부 클릭을 듣고 :
$('body').on('click', function (e) { if (!$('li.dropdown.mega-dropdown').is(e.target) && $('li.dropdown.mega-dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0 ) { $('li.dropdown.mega-dropdown').removeClass('open'); } });여기 데모입니다 : http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/
-
2.이뿐만 아니라 도움이 될 것입니다
이뿐만 아니라 도움이 될 것입니다
$(document).on('click', 'someyourContainer .dropdown-menu', function (e) { e.stopPropagation(); }); -
3.부트 스트랩은 다음과 같은 기능을 제공합니다 :
부트 스트랩은 다음과 같은 기능을 제공합니다 :
| This event is fired immediately when the hide instance method hide.bs.dropdown | has been called. The toggling anchor element is available as the | relatedTarget property of the event.따라서이 기능을 구현하는 닫을 수 드롭 다운을 해제 할 수 있어야한다.
$('#myDropdown').on('hide.bs.dropdown', function (e) { var target = $(e.target); if(target.hasClass("keepopen") || target.parents(".keepopen").length){ return false; // returning false should stop the dropdown from hiding. }else{ return true; } }); -
4.절대 가장 좋은 대답은 클래스 드롭 다운 메뉴 후 폼 태그를 넣어하는 것입니다
절대 가장 좋은 대답은 클래스 드롭 다운 메뉴 후 폼 태그를 넣어하는 것입니다
코드가 너무
<ul class="dropdown-menu"> <form> <li> <div class="menu-item">bla bla bla</div> </li> </form> </ul> -
5.이 힘 도움말 :
이 힘 도움말 :
$("dropdownmenuname").click(function(e){ e.stopPropagation(); }) -
6.또한 해결책을 발견했다.
또한 해결책을 발견했다.
트위터 부트 스트랩 구성 요소 관련 이벤트 핸들러는 문서 객체, I 루프에 첨부 된 핸들러를 위임하고 현재 클릭 된 요소 (또는 부모 중 하나가) 위임 된 이벤트에 의해 관련되어 있는지 확인된다고 가정.
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){ var events = $._data(document, 'events') || {}; events = events.click || []; for(var i = 0; i < events.length; i++) { if(events[i].selector) { //Check if the clicked element matches the event selector if($(event.target).is(events[i].selector)) { events[i].handler.call(event.target, event); } // Check if any of the clicked element parents matches the // delegated event selector (Emulating propagation) $(event.target).parents(events[i].selector).each(function(){ events[i].handler.call(this, event); }); } } event.stopPropagation(); //Always stop propagation });희망은 비슷한 솔루션을 찾고 하나를 할 수 있습니다.
당신의 도움에 대해 감사합니다.
-
7.
$('body').on("click", ".dropdown-menu", function (e) { $(this).parent().is(".open") && e.stopPropagation(); });이것은 어떤 조건에서 작동 할 수 있습니다.
-
8.jQuery를 :
jQuery를 :
<script> $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) { e.stopPropagation(); }); </script>HTML :
<div class="dropdown keep-inside-clicks-open"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown Example <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div>데모:
일반적인: https://jsfiddle.net/kerryjohnson/omefq68b/1/
이 솔루션 데모 : http://jsfiddle.net/kerryjohnson/80oLdtbf/101/
-
9.나는이 간단한 일을 시도하고 그것이 마치 마법처럼 일했다.
나는이 간단한 일을 시도하고 그것이 마치 마법처럼 일했다.
나는
에