如何在Bootstrap 4中自动关闭下拉菜单上的子菜单

<div class="dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">子菜单1</a>
    <a class="dropdown-item" href="#">子菜单2</a>
    <a class="dropdown-item" href="#">子菜单3</a>
  </div>
</div>

<div class="dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </a>
  <div class="dropdown-menu" id="dropdown-menu">
    <a class="dropdown-item" href="#">子菜单1</a>
    <a class="dropdown-item" href="#">子菜单2</a>
    <a class="dropdown-item" href="#">子菜单3</a>
  </div>
</div>

<script>
  var dropdownMenu = document.getElementById('dropdown-menu');
  var dropdownToggle = document.querySelector('.dropdown-toggle');

  dropdownMenu.addEventListener('click', function(event) {
    event.stopPropagation();
  });

  dropdownToggle.addEventListener('click', function() {
    if (dropdownMenu.classList.contains('show')) {
      dropdownMenu.classList.remove('show');
    } else {
      dropdownMenu.classList.add('show');
    }
  });

  document.addEventListener('click', function() {
    dropdownMenu.classList.remove('show');
  });
</script>