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

Program / 글쓴이

부트 스트랩 드롭 다운을 쇼핑 카트로 사용합니다. 장바구니에는 ‘제품 삭제’버튼 (링크)이 있습니다. 클릭하면 장바구니 스크립트가 제품을 삭제하지만 메뉴가 사라집니다. 어쨌든 이것을 막을 방법이 있습니까? 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);
});