Вопрос по twitter-bootstrap, jquery – Держите раскрывающийся список Bootstrap открытым

63

Я использую выпадающий список в качестве корзины покупок. В корзине есть пункт «удалить товар»; кнопка (ссылка). Если я щелкну по нему, мой скрипт покупок удалит товар, но меню исчезнет. Есть ли способ предотвратить это? Я попытался e.startPropagation, но это не сработало:

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

Как вы можете видеть, элемент с классом = & quot; dropwdown-toggle & quot; сделал это выпадающим. Другая идея заключалась в том, что я просто заново открываю ее, нажимая программно. Так что, если кто-то может объяснить мне, как программно открыть выпадающий список Bootstrap, это поможет!

Я вижу, у вас уже есть ответ, но есть гораздо более простой способ. Просто оберните содержимое меню в тег формы. Вот и все. Итак, вместоul.dropdown-menuиспользоватьform.dropdown-menu>ul. rdumont

Ваш Ответ

7   ответов
2

которое было вложено в выпадающее меню в Bootstrap 3. Заимствовал этот синтаксис изисходный код чтобы остановить все переключатели сворачивания от закрытия выпадающего:

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

Вы можете заменить[data-toggle="collapse"] с тем, что вы хотите прекратить закрывать форму, подобно тому, как @DonamiteIsTnt добавил свойство для этого.

31

так и Andres за этот вопрос. А, это решило мою проблему. Позже, однако, мне нужно было что-то, что работало с динамически добавляемыми элементами в моем выпадающем меню. Любой, кто сталкивался с этим, также может быть заинтересован в варианте Andres & apos; Решение, которое работает как с начальными элементами, так и с элементами, добавленными в раскрывающийся список после загрузки страницы:

$(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>
0

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.

1

которые делают его настолько совершенным, насколько нам нужно, с большим контролем над ним:

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

когда вы помещаете форму в раскрывающееся меню, она не разрушается при щелчке внутри нее.

Так что это работает лучше всего для меня:

<div class="dropdown">
    <!-- toggle button/link -->
    <div class="dropdown-menu">
        <form>
            <!-- content -->
        </form>
    </div>
</div>
Это решение сработало для моего требования!
85

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

Edit

Вот демо из комментариев с решением выше:

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>
@ MartenSytema, все зависит от того, как вы удаляете продукты из меню, но возьмите, к примеру, это:jsfiddle.net/andresilich/E9mpuобратите внимание, как я реализовал.stopPropagation() метод вместе со сценарием удаления.
@MartenSytema забыл упомянуть,.live() был заменен.on().
Спасибо за помощь! Единственная проблема заключается в том, что мне нужно использовать метод live jquery для привязки события click, и, как говорит jQuery:Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. link Marten Sytema
@MartenSytema оба метода делают одно и то же. Также,.live() устарел с версии 1.7 jQuery.
Хорошо, это работает, но теперь кнопка удаления больше не работает, о чем я мог подумать сам. Так что, вероятно, мне нужно программно заново открыть div. Есть идеи, как это сделать? Marten Sytema
11

Короче, Вы можете попробовать это. Это работает для меня.

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

Похожие вопросы