CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
George Katsanos
George Katsanos

Reputation: 14165

Cancel hide event on bootstrap dropdown when a specific list item has been clicked

I have a bootstrap dropdown menu with the following HTML structure:

<div class="btn-group cart-item-qty-select open">
    <button type="button" class="btn btn-default dropdown-toggle font-xsm cart-item-qty-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <span class="cart-item-qty-btn-number">32</span>
        <i class="fa fa-align-right font-xsm fa-caret-down"></i>
    </button>
    <ul class="dropdown-menu quantity-dropdown">
        <li class="value" data-value="1">
            <a href="javascript:void(null)">11</a>
        </li>
        <li class="value" data-value="2">
            <a href="javascript:void(null)">12</a>
        </li>
        <li class="value" data-value="3">
            <a href="javascript:void(null)">13</a>
        </li>
        <li class="value" data-value="4">
            <a href="javascript:void(null)">14</a>
        </li>
        <li class="value" data-value="5">
            <a href="javascript:void(null)">15</a>
        </li>
        <li class="value" data-value="6">
            <a href="javascript:void(null)">16</a>
        </li>
        <li class="value" data-value="7">
            <a href="javascript:void(null)">17</a>
        </li>
        <li class="value" data-value="8">
            <a href="javascript:void(null)">18</a>
        </li>
        <li class="value" data-value="9">
            <a href="javascript:void(null)">19</a>
        </li>
        <li role="separator" class="divider"></li>
        <li class="quantity-increase-by-ten">
            <a href="#">20+</a>
        </li>
    </ul>
</div>

I want the dropdown NOT to close (hide.bs.dropdown event cancelled) when li.quantity-increase-by-ten has been clicked.

Unfortunately the event object of the dropdown does not give any information concerning which item of the dropdown has been clicked.

As accepted answers I also consider other bootstrap alternatives that can stylistically resemble and behave as a dropdown but with more event object flexibility.

Upvotes: 2

Views: 1067

Answers (3)

davidRA
davidRA

Reputation: 77

You just need to stop the propagation of the click:

$('.quantity-increase-by-ten').click(function(e) {
    e.stopPropagation();
});

I hope this is the solution you are looking for.

Upvotes: 1

Whiplash450
Whiplash450

Reputation: 964

Would preventDefault() on the click event of the <li> produce the desired effect?

$(".quantity-increase-by-ten").on("click", function(){
    preventDefault();
    //<li> click code here...
});

Upvotes: 1

Valeklosse
Valeklosse

Reputation: 1017

$(function () {
    $(".quantity-increase-by-ten").on("click", function (e) {
        e.stopPropagation();
    });
});

Will stop the call going up the chain and prevent bootstrap from closing the drop down menu.

Upvotes: 1

Related Questions