<div class="dropdown">
  <a class="btn dropdown-toggle"> Dropdown link </a>
  <ul class="dropdown-menu">
    <div class="dropdown-item dropdown">
      <a class="btn dropdown-toggle"> Dropdown link </a>
      <ul class="dropdown-menu">
        <div class="dropdown-item dropdown">
          <a class="btn dropdown-toggle"> Dropdown link </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item">Action</a></li>
            <li><a class="dropdown-item">Another action</a></li>
            <li>
              <a class="dropdown-item">Something else here</a>
            </li>
          </ul>
        </div>
      </ul>
    </div>
  </ul>
</div>

document.querySelectorAll('.dropdown .dropdown-toggle').forEach((a) => {
  let dropdown: bootstrap.Dropdown;
  a.addEventListener('click', (e) => {
    const show = a.classList.contains('show');
    if (show) {
      a.classList.remove('show');
      dropdown.hide();
    } else {
      a.setAttribute('data-bs-toggle', 'dropdown');
      dropdown.show();
      a.removeAttribute('data-bs-toggle');
    }
  });
  dropdown = new bootstrap.Dropdown(a);
});

.dropdown.dropdown-item:active {
  background-color: inherit;
}