I'm facing an issue with a drop-down menu in the sidebar that contains links as menu items. Whenever I click on a menu item (link), the link works fine but the drop-down menu closes.
What I actually want is for the drop-down menu to stay open even after clicking on a menu item.
Here's a snippet of the 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've tried a couple of ways to address this issue:
$('div.dropdown-container a').on('click', function(e) {
e.preventDefault();
});
$('div.dropdown-container a').on('click', function(e) {
e.stopPropagation();
});
Unfortunately, neither of these approaches have worked so far. Any suggestions on how to resolve this would be greatly appreciated.