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

63

Я использую выпадающий список в качестве корзины покупок. В корзине есть пункт «удалить товар»; кнопка (ссылка). Если я щелкну по нему, мой скрипт покупок удалит товар, но меню исчезнет. Есть ли способ предотвратить это? Я попытался 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>

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

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

Ваш Ответ

7   ответов
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);
});
2

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

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

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

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 оба метода делают одно и то же. Также,.live() устарел с версии 1.7 jQuery.
Хорошо, это работает, но теперь кнопка удаления больше не работает, о чем я мог подумать сам. Так что, вероятно, мне нужно программно заново открыть div. Есть идеи, как это сделать? Marten Sytema
@ 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
11

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

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

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