클릭시 부트 스트랩 드롭 다운을 열어 두십시오.

Question

부트 스트랩 드롭 다운을 쇼핑 카트로 사용합니다. 장바구니에는 '제품 제거'버튼 (링크)이 있습니다. 그것을 클릭하면 내 shoppingcart 스크립트가 제품을 제거하지만 메뉴가 사라집니다. 이것을 막기위한 방법이 있습니까? 나는 e.startPropagation을 시도,하지만 작동하지 않았다 당신이 클래스 = "dropwdown-전환"을 그쪽 요소를 볼 수 있듯이

<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> 

은 드롭 다운했다. 또 다른 아이디어는 프로그래밍 방식으로 클릭 할 때 다시 열어야한다는 것입니다. 누군가가 프로그래밍 방식으로 부트 스트랩 드롭 다운을 여는 방법을 설명해 준다면 도움이 될 것입니다!

Answer 1

과 같이 버튼 자체에 전파를 제거해보십시오 :

http://jsfiddle.net/andresilich/E9mpu/

:

$('.dropdown-menu a.removefromcart').click(function(e) { 
    e.stopPropagation(); 
}); 

편집 여기

을 위의 솔루션 코멘트에서 데모입니다 관련 코드 :

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> 

Answer 2

이 대답은 허용 대답에 불과 (!) 참고입니다. 이 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> 태그 또는 그 자식 요소 중 하나에 어디 속성했습니다. EG :

<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> 

Answer 3

I는 모두 축소 중지 source code에서 구문을 차용 부트 스트랩 (3)의 드롭 다운 메뉴 내에 중첩 드롭 폐쇄로부터 전환 된 아코디언/전환 서브 메뉴와 같은 문제가 있었다 :

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

당신이 양식을 닫는 중지 원하는대로와 [data-toggle="collapse"]를 대체 할 수있는, @DonamiteIsTnt이 속성을 추가하는 것과 유사 그렇게 할 수 있습니다.

Answer 4

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

<span class="product-remove"> 
    <a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a> 
    </span> 

Answer 5

나는 우리가 거기에 컨트롤의 더와 함께 필요한만큼 완벽하게 작동하는지 확인 몇 줄의 코드를 썼다 :

부트 스트랩 4에

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

Answer 6

, 드롭 다운 메뉴 내에서 양식을 둘 때, 내부를 클릭하면 접히지 않습니다.

그래서이 나에게 가장 일 :

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