Bootstrap navbar dropdown not closing on item select

To solve the problem of not closing after clicking the option of Bootstrap navbar dropdown, first of all, you need to confirm that you are using Bootstrap 5 and correctly introduce dependencies; secondly, you can add the data-bs-dismiss="dropdown" attribute or manually control the closing with JS; at the same time, you can avoid abuse of e.preventDefault() to prevent the default behavior; in special scenarios such as anchor jump, you can combine other methods to deal with it. 1. Make sure to use Bootstrap 5 and load CSS and JS correctly; 2. It is recommended to add data-bs-dismiss="dropdown" on dropdown-item; 3. Or listen to click events through JS and call the dropdown.hide() method to close; 4. Be careful not to close the menu due to preventDefault(); 5. When the anchor jumps, you can combine scroll event processing to handle the closing logic according to the situation.

When using Bootstrap's navbar dropdown, many developers will encounter a problem: after clicking an option in the drop-down menu, the menu will not automatically close. Although this is not a bug in Bootstrap, it will indeed affect the user experience in actual development.

The core of this problem is that Bootstrap will not actively close the drop-down menu by default, unless the user clicks on the trigger area again or clicks elsewhere on the page. So how should we solve it?

1. Make sure the correct Bootstrap version and dependencies are introduced

First, make sure you are using Bootstrap 5 (currently mainstream version), because you no longer rely on jQuery since v5. If you are still using the old version of Bootstrap 4 or earlier, and cooperate with jQuery, there may be inconsistent behavior problems.

Check if the HTML is correctly introduced:

• Bootstrap CSS
• Bootstrap JS (preferably introduced via @popperjs/core and native ES Modules)

If you just copy and paste the code but don't load the necessary scripts, the dropdown behavior may be incomplete.

2. Add manual closing logic (recommended method)

By default, clicking dropdown-item will not trigger the closing action. To turn it off, you need to manually add a piece of JavaScript to remove .show class or call the Bootstrap API.

Method 1: Use data-bs-dismiss="dropdown" attribute

This is the easiest way. Just add this attribute to each <a></a> tag:

 <a class="dropdown-item" href="#" data-bs-dismiss="dropdown">Home</a>

This way, every time you click this link, the drop-down menu will automatically close.

Method 2: Manual control with JS

If you do not want to modify the HTML structure, you can also control it through JS. For example, listen to all dropdown-item click events and then manually close:

 document.querySelectorAll('.dropdown-item').forEach(item => {
  item.addEventListener('click', () => {
    const dropdown = bootstrap.Dropdown.getInstance(item.closest('.dropdown-toggle'));
    if (dropdown) {
      dropdown.hide();
    }
  });
});

Note that this code must be executed after the DOM is loaded, such as in DOMContentLoaded or introduced at the bottom of the body.

3. Check whether the default event is blocked

Sometimes we add e.preventDefault() to the link, for example, when making asynchronous requests, this may cause the menu to fail to close normally.

For example, the following situation:

 document.querySelector('.dropdown-item').addEventListener('click', function(e) {
  e.preventDefault(); // This will cause the default behavior to be blocked, including closing the menu // Doing some other operations...
});

At this time, even if you use data-bs-dismiss="dropdown" it will not take effect. So be careful not to abuse preventDefault() , or manually call hide() method after processing the logic.

4. Behavioral differences when using anchor jumps

If your dropdown-item is an ordinary anchor point (such as #section1 ) and you want the page to scroll past and close the menu after clicking, in addition to the above method, you can also consider combining scroll event or IntersectionObserver to determine whether the target position has reached, and then close the menu.

However, this kind of scenario is relatively rare, and most of the time, adding data-bs-dismiss="dropdown" is enough.

Basically that's it. This issue is not complicated but is easily overlooked, especially when dynamically generating menu items or binding events. Just remember that dropdown will not be turned off by itself, and you need to intervene manually.

The above is the detailed content of Bootstrap navbar dropdown not closing on item select. For more information, please follow other related articles on the PHP Chinese website!