Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Bootstrap dropdown closing when clicked in HTML

HTML Bootstrap Web Development Front End Technology

Bootstrap dropdowns automatically close when you click outside the dropdown area or on a dropdown item. Sometimes you may want to prevent the dropdown from closing when users click inside the dropdown content, allowing them to interact with forms, checkboxes, or other elements without the dropdown disappearing.

Syntax

Following is the syntax to prevent dropdown from closing using the hide.bs.dropdown event −

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

Following is the syntax to prevent dropdown closing using stopPropagation() −

$('#dropdownId .dropdown-menu').on('click', function(e) {
    e.stopPropagation();
});

Using the hide.bs.dropdown Event

The hide.bs.dropdown event is fired when the dropdown is about to be hidden. By returning false from this event handler, you can prevent the dropdown from closing entirely.

Example

Following example demonstrates how to keep a dropdown open using the hide.bs.dropdown event −

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Dropdown - Prevent Closing</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
    <h3>Dropdown That Stays Open</h3>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="myDropdown" data-bs-toggle="dropdown">
            Click Me
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>

    <script>
        $('#myDropdown').on('hide.bs.dropdown', function () {
            return false;
        });
    </script>
</body>
</html>

In this example, the dropdown will remain open even when you click outside of it or on dropdown items. This method completely prevents the dropdown from closing.

Using stopPropagation() Method

The stopPropagation() method prevents the click event from bubbling up to parent elements. This allows you to click inside the dropdown content without closing it, while still allowing normal closing behavior when clicking outside.

Example

Following example shows how to use stopPropagation() to prevent dropdown closing only when clicking inside −

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Dropdown - Stop Propagation</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
    <h3>Dropdown with Form Inside</h3>
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="formDropdown" data-bs-toggle="dropdown">
            Settings
        </button>
        <div class="dropdown-menu p-3" style="width: 250px;">
            <h6>User Preferences</h6>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="notifications">
                <label class="form-check-label" for="notifications">
                    Enable Notifications
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="darkMode">
                <label class="form-check-label" for="darkMode">
                    Dark Mode
                </label>
            </div>
            <button type="button" class="btn btn-sm btn-success mt-2">Save</button>
        </div>
    </div>

    <script>
        $('#formDropdown .dropdown-menu').on('click', function(e) {
            e.stopPropagation();
        });
    </script>
</body>
</html>

This dropdown contains form elements that users can interact with. The dropdown stays open when clicking inside but closes when clicking outside, providing better user experience.

Selective Prevention with Conditions

You can also conditionally prevent dropdown closing based on specific criteria or user actions.

Example

Following example shows how to prevent closing only for specific elements within the dropdown −

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Dropdown - Selective Prevention</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
    <h3>Mixed Dropdown Behavior</h3>
    <div class="dropdown">
        <button class="btn btn-info dropdown-toggle" type="button" id="mixedDropdown" data-bs-toggle="dropdown">
            Options
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Link 1 (closes dropdown)</a></li>
            <li class="stay-open"><a class="dropdown-item" href="#">Link 2 (stays open)</a></li>
            <li><a class="dropdown-item" href="#">Link 3 (closes dropdown)</a></li>
            <li class="stay-open"><a class="dropdown-item" href="#">Link 4 (stays open)</a></li>
        </ul>
    </div>

    <script>
        $('.stay-open').on('click', function(e) {
            e.stopPropagation();
        });
    </script>
</body>
</html>

In this example, only items with the stay-open class prevent the dropdown from closing when clicked. Other items allow normal closing behavior.

Comparison of Methods

Following table compares the different approaches to prevent Bootstrap dropdown closing −

Method Behavior Use Case
hide.bs.dropdown with return false Prevents dropdown from ever closing When you need the dropdown to stay permanently open
stopPropagation() on dropdown menu Prevents closing when clicking inside, allows closing when clicking outside Forms, interactive content inside dropdown
Selective stopPropagation() Prevents closing only for specific elements Mixed behavior − some items close, others don't

Conclusion

Use hide.bs.dropdown with return false to completely prevent dropdown closing, or use stopPropagation() on click events to prevent closing only when clicking inside the dropdown content. The stopPropagation() method is generally preferred as it maintains normal closing behavior when clicking outside the dropdown.

Updated on: 2026-03-16T21:38:53+05:30

2K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements