클릭시 Bootstrap 드롭 다운을 열어 둡니다.

부트 스트랩 드롭 다운을 쇼핑 카트로 사용합니다. 장바구니에는 '제품 삭제'버튼 (링크)이 있습니다. 클릭하면 장바구니 스크립트가 제품을 삭제하지만 메뉴가 사라집니다. 어쨌든 이것을 막을 방법이 있습니까? e.startPropagation을 시도했지만 작동하지 않는 것 같습니다.

<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:
    &acirc;&sbquo;&not; 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: &euro; 43,00</a></li>

      <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

보시다시피 class = "dropwdown-toggle"을 사용하여 요소를 드롭 다운으로 만들었습니다. 또 다른 아이디어는 프로그래밍 방식으로 클릭하면 다시 여는 것입니다. 따라서 누군가가 부트 스트랩 드롭 다운을 프로그래밍 방식으로 여는 방법을 설명해 주시면 도움이 될 것입니다!

다음과 같이 버튼 자체에서 전파를 제거해보십시오.

$('.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:
    &acirc;&sbquo;&not; 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: &euro; 43,00</a></li>
        <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

이 답변은 받아 들여진 답변에 대한 부 주일뿐입니다. 이 Q & A에 대한 OP와 Andres 덕분에 내 문제가 해결되었습니다. 그러나 나중에 드롭 다운에 동적으로 추가 된 항목과 함께 작동하는 것이 필요했습니다. 이 문제를 접하는 모든 사람은 페이지가로드 된 후 드롭 다운에 추가 된 요소와 초기 요소 모두에서 작동하는 변형 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>

부트 스트랩 4에서는 드롭 다운 메뉴에 양식을 넣을 때 내부를 클릭 할 때 축소되지 않습니다.

그래서 이것은 나를 위해 가장 잘 작동했습니다.

<div class="dropdown">
    <!-- toggle button/link -->
    <div class="dropdown-menu">
        <form>
            <!-- content -->
        </form>
    </div>
</div>

간단히 말해서 이것을 시도 할 수 있습니다. 그것은 나를 위해 일하고 있습니다.

<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')
})

codepen 에서 이것을 시도하십시오 .

Bootstrap 3의 드롭 다운 메뉴 내에 중첩 된 아코디언 / 토글 하위 메뉴에서 동일한 문제가 발생했습니다. 모든 축소 토글이 드롭 다운을 닫는 것을 막기 위해 소스 코드 에서이 구문을 빌 렸습니다.

$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', 
    function (e) { e.stopPropagation() }
);

[data-toggle="collapse"]@DonamiteIsTnt가 속성을 추가 한 것과 유사하게 양식 닫기를 중지하려는 항목으로 바꿀 수 있습니다 .

더 많은 제어를 통해 필요한만큼 완벽하게 작동하도록 몇 줄의 코드를 작성했습니다.

$(".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);
});