Giữ dropdown Bootstrap mở sau khi click bên trong

Mặc định, dropdown Bootstrap tự đóng khi click bất kỳ đâu bên ngoài. Để giữ dropdown mở sau khi click bên trong menu, có 2 cách:

Cách 1: Ngăn sự kiện hide.bs.dropdown (Bootstrap 3/4/5)

$('#myDropdown').on('hide.bs.dropdown', function (e) {
  // Nếu click xảy ra BÊN TRONG .dropdown-menu -> không đóng
  if (e.clickEvent && $(e.clickEvent.target).closest('.dropdown-menu').length) {
    return false; // Ngăn đóng
  }
});

Hoặc đơn giản hơn (Bootstrap 4/5):

$('.dropdown-menu').on('click', function (e) {
  e.stopPropagation(); // Ngăn sự kiện nổi bọt lên document
});

Cách 2: Xử lý click event với stopPropagation()

$('#myDropdown .dropdown-menu').on('click', function(e) {
  e.stopPropagation(); // Ngăn event bubbling đến document -> không trigger hide
});

Giải thích cơ chế

• Bootstrap gán event listener trên document để lắng nghe click -> đóng dropdown.
• Click bên trong menu -> event nổi bọt (bubble) lên document -> trigger đóng.
• e.stopPropagation() chặn sự kiện không nổi bọt tiếp -> dropdown không biết click xảy ra -> giữ mở.

Ví dụ hoàn chỉnh (Bootstrap 5)

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="myDropdown" data-bs-toggle="dropdown" aria-expanded="false">
      Menu tùy chọn
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Item 1</a></li>
      <li><a class="dropdown-item" href="#">Item 2</a></li>
      <li><a class="dropdown-item" href="#">Item 3</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><button class="dropdown-item" type="button">Action button</button></li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Giữ dropdown mở khi click vào item/button bên trong
    document.querySelector('.dropdown-menu').addEventListener('click', function(e) {
      e.stopPropagation();
    });
  </script>
</body>
</html>

Lưu ý

• Nếu item là <a href="...">, click sẽ điều hướng trang -> dropdown tự đóng do load trang mới (bình thường).
• Nếu muốn click item không điều hướng mà xử lý JS: dùng <button class="dropdown-item"> hoặc e.preventDefault() trên link.
• Cách này cũng áp dụng cho dropup, dropright, dropleft.