안쪽을 클릭할 때 드롭다운 메뉴가 닫히지 않도록 합니다.
Twitter Bootstrap 드롭다운 메뉴가 있습니다.모든 Twitter Bootstrap 사용자가 알고 있듯이 드롭다운메뉴는 클릭 시 닫힙니다(내부를 클릭해도 닫힙니다).
위해 를 쉽게 부착하고 핸들러를 할 수 .event.stopPropagation()
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel"
class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel"
class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>
이것은 행동처럼 . , 이것은 매우 쉬운 행동이기 때문이다.carousel-controls)carousel indicators는 )에됩니다.document '''는click이러한 요소(예:/다음 컨트롤 등)에 대한 이벤트는 "예"가 됩니다.
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
[ ]드롭다운 [ Twitter Bootstrap ]드롭다운에 hide/hidden다음과 같은 이유로 이벤트는 해결 방법이 아닙니다.
- 두 이벤트 핸들러에 대해 제공된 이벤트 개체는 클릭된 요소를 참조하지 않습니다.
- 수 에, 「하다」를 합니다.
flagnot (클래스 또는 속성을 사용할 수 없습니다).
이 바이올린은 정상적인 동작이고 이 바이올린은 이 바이올린과event.stopPropagation()
갱신하다
로만의 답변에 감사드립니다.아래에 있는 답변도 찾았습니다.
이것도 도움이 될 거야
$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
e.stopPropagation();
});
애트리뷰트 삭제data-toggle="dropdown"또한 드롭다운의 열기/닫기를 구현하는 것이 해결책이 될 수 있습니다.
먼저 링크를 클릭하여 다음과 같이 드롭다운을 열거나 닫습니다.
$('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/
가장 좋은 답은 클래스 드롭다운 메뉴 뒤에 폼 태그를 붙이는 것입니다.
그래서 당신의 코드는
<ul class="dropdown-menu">
<form>
<li>
<div class="menu-item">bla bla bla</div>
</li>
</form>
</ul>
| 이 이벤트는 hide instance 메서드가 실행되었을 때 즉시 실행됩니다.hide.bs.discl | 가 호출되었습니다.토글링 앵커 요소는 다음과 같이 사용할 수 있습니다.| 관련 이벤트 대상 속성.
따라서, 이 기능을 실장하면, 드롭 다운이 닫히지 않게 할 수 있습니다.
$('#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;
}
});
이것은 도움이 될 수 있습니다.
$("dropdownmenuname").click(function(e){
e.stopPropagation();
})
나도 해결책을 찾았다.
「 」가 「 」라고하면,Twitter Bootstrap Components는 ""에 됩니다.document오브젝트: 연결된 핸들러를 루프하여 현재 클릭된 요소(또는 상위 요소 중 하나)가 위임된 이벤트에 관련되어 있는지 확인합니다.
$('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
});
비슷한 해결책을 찾는 사람에게 도움이 되길 바랍니다.
도와주셔서 감사합니다.
드롭다운 메뉴를 닫지 않기 위해 아래와 같은 클릭 이벤트를 추가합니다.
<div class="dropdown-menu dropdown-menu-right" onclick="event.stopPropagation()" aria-labelledby="triggerId">
$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".open") && e.stopPropagation();
});
이것은, 어떠한 조건에서도 동작합니다.
이렇게 간단한 걸 해봤는데 잘 되더라고요.
드롭다운 메뉴 요소를 에서 변경했습니다.<div>로로 합니다.<form>잘 작동했어요.
<div class="nav-item dropdown" >
<a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
Click to open dropdown
</a>
<form class="dropdown-menu ">
<ul class="list-group text-black">
<li class="list-group-item" >
</li>
<li class="list-group-item" >
</li>
</ul>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-item dropdown" >
<a href="javascript:;" class="nav-link dropdown-toggle" data-toggle="dropdown">
Click to open dropdown
</a>
<form class="dropdown-menu ">
<ul class="list-group text-black">
<li class="list-group-item" >
List Item 1
</li>
<li class="list-group-item" >
LI 2<input class="form-control" />
</li>
<li class="list-group-item" >
List Item 3
</li>
</ul>
</form>새로운 부트스트랩5에서는 솔루션은 매우 간단합니다.
문서 페이지에서 인용:
기본적으로 드롭다운 메뉴 안쪽 또는 바깥쪽을 클릭하면 드롭다운 메뉴가 닫힙니다.autoClose 옵션을 사용하면 드롭다운의 이 동작을 변경할 수 있습니다.
기본 동작 외에 다음 3가지 옵션을 사용할 수 있습니다.
- 한 외부: " " " " 。
data-bs-auto-close="outside" - 한 내부: " " " " "
data-bs-auto-close="inside" - 닫기: ★★★★★★★★★★★★★★★★★★:
data-bs-auto-close="false"
예:
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" data-bs-auto-close="inside" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
상세정보 : https://getbootstrap.com/docs/5.1/components/dropdowns/ #auto-close-displayed
j쿼리:
<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/
부트스트랩 4.3 @Vartan 의 boot boot 。그의 솔루션은 최신 버전에서는 더 이상 작동하지 않습니다.target은 항상 루트를 합니다.div클릭 위치에 관계없이 사용할 수 있습니다.
코드는 다음과 같습니다.
$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
if (!e.clickEvent) {
// There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked.
// What we usually want to happen in such situations is to hide the dropdown so we let it hide.
return true;
}
var target = $(e.clickEvent.target);
return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});
<div class="dropdown dropdown-keep-open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
$('body').on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".show") && e.stopPropagation();
});
예를 들어 Bootstrap 4 Alpha에는 이 메뉴 이벤트가 있습니다.왜 사용하지 않는가?
// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
e.stopPropagation();
e.preventDefault();
});
등data-toggle="dropdown" 있다clickevent.stopPropagation()★★★★★★★★★★★★★★★★★★.
두 번째 방법이 더 바람직해 보입니다.또한 부트스트랩 개발자도 이 방법을 사용합니다.소스 파일에서 드롭다운 요소의 초기화를 찾았습니다.
// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);
이 행은 다음과 같습니다.
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
하면 '어울리다'를 수 .form 「Class」를 컨테이너내의 요소..dropdown이치하다
은 이 를 했습니다.<form>태그가 표시됩니다.이 솔루션은 이해하기 쉬우며, 다음 URL에서 보실 수 있습니다.https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js
입니다.'click.bs.dropdown.data-api'합니다.'.dropdown .your-custom-class-for-keep-open-on-click-elements'.
또는 코드로
$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
event.stopPropagation();
});
실행해도 .event.stopPropagation이치노런런거 。
$(".dropdown-menu a").click((event) => {
event.stopPropagation()
let url = event.target.href
//Do something with the url or any other logic you wish
})
편집: 다른 사용자가 이 답변을 보고 리액션을 사용하면 작동하지 않습니다.javascript 이벤트를 다르게 처리하여 리액트 이벤트 핸들러가 호출될 때 이미 이벤트가 실행되어 전파됩니다.이 문제를 해결하려면 이렇게 수동으로 이벤트를 첨부해야 합니다.
handleMenuClick(event) {
event.stopPropagation()
let menu_item = event.target
//implement your logic here.
}
componentDidMount() {
document.getElementsByClassName("dropdown-menu")[0].addEventListener(
"click", this.handleMenuClick.bind(this), false)
}
}
이 경우에도 하실 수 있습니다.form★★★★★★★★★★★★★★★★:
<div class="dropdown-menu">
<form>
Anything inside this wont close the dropdown!
<button class="btn btn-primary" type="button" value="Click me!"/>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Clik this and the dropdown will be closed</a>
<a class="dropdown-item" href="#">This too</a>
</div>
출처 : https://getbootstrap.com/docs/5.0/components/dropdowns/ #폼
부트스트랩 5
5 Bootstrap 5 버전을 추가해서 .data-bs-auto-close="outside". 옵션은 다음과 같습니다.autoClose, 됩니다.
.data-bs-auto-close="outside"data-bs-toggle="dropdown"트리거를 선택하면 접기가 전환되는 동안 드롭다운이 열린 상태로 유지됩니다.
공식 부트스트랩 문서: https://getbootstrap.com/docs/5.1/components/dropdowns/ #documents 및 이 코드펜의 예: (내 펜이 아님) https://codepen.io/SitePoint/pen/BaReWGe
드롭다운에서 클릭이 전파되지 않도록 한 다음 carousel javascript 메서드를 사용하여 수동으로 carousel 컨트롤을 다시 구현할 수 있습니다.
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
event.stopPropagation();
});
$('a.left').click(function () {
$('#carousel').carousel('prev');
});
$('a.right').click(function () {
$('#carousel').carousel('next');
});
$('ol.carousel-indicators li').click(function (event) {
var index = $(this).data("slide-to");
$('#carousel').carousel(index);
});
여기 jsfiddle이 있습니다.
$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
var $a = $(e.target), is_a = $a.is('.is_a');
if($a.hasClass('dropdown-toggle')){
$('ul.dropdown-menu', this).toggle(!is_a);
$a.toggleClass('is_a', !is_a);
}
}).on('mouseleave', function(){
$('ul.dropdown-menu',this).hide();
$('.is_a', this).removeClass('is_a');
});
가능한 한 스마트하고 기능적인 것으로 다시 한 번 업데이트했습니다.이제 내비게이션 밖에서 맴돌면 닫히고, 안에 있는 동안 열린 채로 있습니다. 완벽합니다.
양식을 사용하라는 답변이 이미 있다는 것은 알지만, 제공된 마크업이 정확하지 않거나 이상적입니다.여기 가장 쉬운 해결책이 있습니다. javascript는 전혀 필요하지 않으며 드롭다운이 깨지지 않습니다.Bootstrap 4와 연동됩니다.
<form class="dropdown-item"> <!-- Your elements go here --> </form>
이 질문이 jQuery에 대한 질문인 것은 알지만 Angular를 사용하는 사용자는이 문제가 있는 JS에서는 이 문제를 처리하는 디렉티브를 작성할 수 있습니다.
angular.module('app').directive('dropdownPreventClose', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function(e) {
e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
});
}
};
});
''를 더하면 돼요.dropdown-prevent-close메뉴 닫기를 트리거하고 있는 요소, 그리고 이를 방지해야 합니다.select'CHANGE: 'CHANGE: 'CHANGE: 'CHANGE:
<div class="dropdown-menu">
<select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
<option value="">Select Me</option>
</select>
</div>
Angular2 부트스트랩에서는 대부분의 시나리오에서 nonInput을 사용할 수 있습니다.
<div dropdown autoClose="nonInput">
nonInput - (기본값) 클릭된 요소가 입력 또는 텍스트 영역이 아닌 한 해당 요소를 클릭하면 드롭다운이 자동으로 닫힙니다.
https://valor-software.com/ng2-bootstrap/ #/flashs
4 6] [ [부트4 4 파] 6 ][레레 ]e.stopPropagation() 행동을 link_todata-method하지 않다get로는 모든 을 "Default"로 입니다.get
이 문제를 해결하기 위해, 저는 보편적인 해결책을 제안합니다.
$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
return $('.dropdown').one('hide.bs.dropdown', function() {
return false;
});
});
$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
return $('.dropdown').one('hide.bs.dropdown', function() {
return false;
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list-alt"></i> Menu item 1
<span class="fa fa-chevron-down pull-right"></span>
</a>
<ul class="dropdown-menu mega-dropdown-menu">
<li>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel"></li>
<li class="active" data-slide-to="1" data-target="#carousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="" class="img-rounded" src="img1.jpg">
</div>
<div class="item active">
<img alt="" class="img-rounded" src="img2.jpg">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" role="button" href="#carousel" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</li>
</ul>
</li>
</ul>이게 도움이 됐지만
$('.dropdown-menu').on('click', function (e) {
if ($(this).parent().is(".open")) {
var target = $(e.target);
if (target.hasClass("keepopen") || target.parents(".keepopen").length){
return false;
}else{
return true;
}
}
});
해 두세요).dropdown-menu ★★★★★★★★★★★★★★★★★」keepopen.
<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">
는 것을 방지합니다.<body> '''를 dropdown-menu.
이게 도움이 됐으면 좋겠네요.
감사합니다.
가장 심플한 솔루션은 다음과 같습니다.
- , 「」의
keep-opendrop closing ( 닫힘을 ) - 그리고 이 코드 조각이 나머지를 처리한다:
$('.dropdown').on('click', function(e) {
var target = $(e.target);
var dropdown = target.closest('.dropdown');
return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});
기본 부트스트랩 내비게이션을 사용하고 싶기 때문에 어떤 솔루션도 작동하지 않았습니다.이 문제에 대한 나의 해결책은 다음과 같습니다.
$(document).on('hide.bs.dropdown', function (e) {
if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
$(e.relatedTarget).parent().removeClass('open');
return true;
}
return false;
});
javascript나 jquery code를 작성하는 대신(휠을 재발명).위의 시나리오는 부트스트랩 자동 닫기 옵션으로 관리할 수 있습니다.다음 중 하나의 값을 자동 닫을 수 있습니다.
항상 - (기본값) 요소를 클릭하면 드롭다운이 자동으로 닫힙니다.
outsideClick - 사용자가 드롭다운 외부에 있는 요소를 클릭할 때만 드롭다운을 자동으로 닫습니다.
disabled - 자동 닫기를 비활성화합니다.
다음 plunkr을 참조하십시오.
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
세트
uib-dropdown auto-close="disabled"
이것이 도움이 되기를 바랍니다:)
».dropdown the content put the put the 콘 the.keep-open다음과 같이 합니다.
$('.dropdown').on('click', function (e) {
var target = $(e.target);
var dropdown = target.closest('.dropdown');
if (target.hasClass('keep-open')) {
$(dropdown).addClass('keep-open');
} else {
$(dropdown).removeClass('keep-open');
}
});
$(document).on('hide.bs.dropdown', function (e) {
var target = $(e.target);
if ($(target).is('.keep-open')) {
return false
}
});
이전 케이스에서는 컨테이너 객체와 관련된 이벤트를 회피했지만 이제 컨테이너는 클래스 keep-open 및 닫히기 전에 check를 상속합니다.
언급URL : https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside
'itsource' 카테고리의 다른 글
| 레일 3 액티브 레코드:연관 개수별 주문 (0) | 2022.09.25 |
|---|---|
| MySQL 업데이트가 인덱스 조건 푸시다운을 지원하지 않습니까? (0) | 2022.09.25 |
| 디렉토리의 모든 파일을 루프하는 PHP 스크립트? (0) | 2022.09.25 |
| DBeaver를 사용하여 로컬 호스트의 MariaDB에 연결할 수 없음 (0) | 2022.09.25 |
| 체인 콜의 모의 또는 스터브 (0) | 2022.09.25 |