javascript - Prevent Dropdown menu from closing if I click a menu item

Question

I have a drop down menu in sidebar and it has links as menu items. When I click a menu item(link) then link works fine but drop down menu gets closed.

But I want that dropdown menu stay opened even after clicking a menu item.

HTML Code:

<div id="sidebar-wrapper">
     <div class="sidebar-heading">Start Bootstrap </div>
     <div class="list-group list-group-flush">              
          <a href="{% url 'shop:admin_orders_list' %}">All orders</a>

          <button class="dropdown-btn button">Products
               <i class="fa fa-caret-down"></i>
          </button>

          <div class="dropdown-container">
               <a href="{% url 'shop:admin_products_list' %}">View Products</a>
               <a href="{% url 'shop:admin_product_create' %}">Add New Product</a>
          </div>   
     </div>
</div>

I tried these two following ways:

$('div.dropdown-container a').on('click', function(e) {
        e.preventDefault();
});

$('div.dropdown-container a').on('click', function(e) {
        e.stopPropagation();
});

But these two ways did not work.

Please help me to resolve it.

Answer 1

try this make sure to put your dropdown id there

$('#dropdownid').on('hide.bs.dropdown', function () {
    return false;
});