클릭 시 부트스트랩 드롭다운을 열어 둡니다.
저는 장바구니로 부츠트랩 드롭다운을 사용합니다.장바구니에 '제품 제거' 버튼(링크)이 있습니다.클릭하면 장바구니 스크립트가 제품을 제거하는데 메뉴가 사라집니다.이것을 막을 방법이 없을까요?e.start Propagation을 시도해봤지만, 효과가 없었던 것 같습니다.
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li>
<span class="quantity">1x</span>
<span class="product-name">Test Product </span>
<span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a>
</span></li>
<li><a href="#">Total: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>
class="dropwdown-limit"로 구성된 요소가 드롭다운으로 만들었습니다.또 다른 아이디어는 프로그램적으로 클릭할 때 다시 여는 것이었습니다.그래서 누군가가 부트스트랩 드롭다운을 프로그래밍적으로 여는 방법을 설명해 줄 수 있다면 도움이 될 것입니다!
버튼 자체의 전파를 다음과 같이 제거해 봅니다.
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
편집
다음은 위의 솔루션에 대한 의견에서 나온 데모입니다.
http://jsfiddle.net/andresilich/E9mpu/
관련 코드:
JS
$(".removefromcart").on("click", function(e){
var fadeDelete = $(this).parents('.product');
$(fadeDelete).fadeOut(function() {
$(this).remove();
});
e.stopPropagation();
});
HTML
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">1</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">10</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">8</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">3</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">4</span></span>
</li>
<li class="divider"></li>
<li><a href="#">Total: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>
부트스트랩 4에서 드롭다운 메뉴 안에 양식을 넣었을 때 그 양식 안을 클릭해도 무너지지 않습니다.
그래서 제게 가장 효과적이었습니다.
<div class="dropdown">
<!-- toggle button/link -->
<div class="dropdown-menu">
<form>
<!-- content -->
</form>
</div>
</div>
이 답변은 승인된 답변에 대한 부수적인 답변일 뿐입니다.이번 Q&A를 위해 OP와 Andres가 함께 해준 덕분에 문제가 해결되었습니다.하지만 나중에는 드롭다운에 동적으로 추가된 항목과 함께 작동하는 무언가가 필요했습니다.페이지가 로드된 후 드롭다운에 추가되는 요소뿐만 아니라 초기 요소와 함께 작동하는 변형 안드레스 솔루션에 관심이 있는 사람은 누구나 있을 것입니다.
$(function() {
$("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
e.stopPropagation();
});
});
또는 동적으로 만든 드롭다운 메뉴의 경우:
$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
e.stopPropagation();
});
그럼 그냥.data-keepOpenOnClick어느 하나의 속성으로 지정합니다.<li>상황에 따라 태그 또는 하위 요소를 선택할 수 있습니다.예:
<ul class="dropdown-menu">
<li>
<-- EG 1: Do not close when clicking on the link -->
<a href="#" data-keepOpenOnClick>
...
</a>
</li>
<li>
<-- EG 2: Do not close when clicking the checkbox -->
<input type="checkbox" data-keepOpenOnClick> Pizza
</li>
<-- EG 3: Do not close when clicking the entire LI -->
<li data-keepOpenOnClick>
...
</li>
</ul>
간단히 말하면, 이거 해보실 수 있어요.그것은 저에게 효과가 있습니다.
<span class="product-remove">
<a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
</span>
줄 때 메뉴가 열립니다.show사용하지 않고 스스로 기능을 구현할 수 있도록 메뉴에 클래스를 지정합니다.data-toggle="dropdown".
<div class="dropdown">
<button class="btn btn-secondary" type="button">
Dropdown button
</button>
<div class="dropdown-menu">
<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>
<div id="overlay"></div>
#overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
#overlay.show{
display: block;
}
.dropdown-menu{
z-index: 1001;
}
$('button, #overlay').on('click', function(){
$('.dropdown-menu, #overlay').toggleClass('show')
})
이거 코드펜으로 해보세요.
부트스트랩 3의 드롭다운 메뉴 내에 중첩된 아코디언/토글 하위 메뉴에도 동일한 문제가 있었습니다.소스 코드에서 이 구문을 빌려 모든 축소 토글이 드롭다운을 닫는 것을 막았습니다.
$(document).on(
'click.bs.dropdown.data-api',
'[data-toggle="collapse"]',
function (e) { e.stopPropagation() }
);
대체가능합니다[data-toggle="collapse"]@DonamiteIs와 유사하게 양식을 닫는 것을 중단하고 싶은 모든 것을 사용합니다.Tnt는 이를 위해 속성을 추가했습니다.
필요한 만큼 완벽하게 작동할 수 있도록 몇 가지 코드 라인을 작성했습니다. 더 많은 제어 기능이 필요합니다.
$(".dropdown_select").on('hidden.bs.dropdown', function () {
if($(this).attr("keep-open") == "true") {
$(this).addClass("open");
$(this).removeAttr("keep-open");
}
});
$(".dropdown_select ul li").bind("click", function (e) {
// DO WHATEVER YOU WANT
$(".dropdown_select").attr("keep-open", true);
});
언급URL : https://stackoverflow.com/questions/10480697/keep-bootstrap-dropdown-open-on-click
'programing' 카테고리의 다른 글
| MariaDB: GRANT ALL을 수행할 때 오류 1045 (0) | 2023.09.07 |
|---|---|
| 명령줄에서 ssh를 통해 원격 시스템에서 MySQL 쿼리 실행 (0) | 2023.09.07 |
| GROUP BY가 없는 집계 쿼리 (0) | 2023.09.07 |
| Spring의 @Value 주석에 여러 속성 이름을 지정할 수 있습니까? (0) | 2023.09.07 |
| MySQL - 사용자의 선택에 따라 열 '이름'을 선택합니다. 열 'id'와 'parent'의 행이 동일한 경우 (0) | 2023.09.07 |