This is an example event handling to replace JQuery for Bootstrap 4.

event_handling_bootstrap4.js

const html = document.getElementsByTagName('html')[0];

html.addEventListener('click', function(e) {
  /* Event listener handler for html element.
  * This code will be executed when user clicked on all html area.
  */

  if (e.target.className === 'nav-link dropdown-toggle') {
    // Check whether element is 'nav-link dropdown toggle'.
    // Set nextElementSibling to toggling 'show' class name.
    const sibling = e.target.nextElementSibling;
    sibling.classList.toggle('show');
  } else {
    // hide all shown navbar dropdown.
    hideNavDropdown();
  }
});

function hideNavDropdown() {
  /* To hide all shown navbar dropdown.
  */

  const navDropdowns = document.getElementsByClassName('nav-link dropdown-toggle');

  for (let i=0;i<navDropdowns.length;i++) {
    const dropdown = navDropdowns[i];
    const sibling = dropdown.nextElementSibling;
    if (sibling.classList.contains('show')) {
      sibling.classList.remove('show');
    }
  }
}