Bootstrap 4下拉菜单href失效及移除默认点击行为问题求解

问题1：点击「PRODUCTS」无法跳转到third.html #

Bootstrap默认会拦截下拉触发链接的跳转行为，解决方法是通过JavaScript区分桌面端与移动端场景，手动处理跳转逻辑（移动端保留点击展开下拉的功能）：

添加以下JavaScript代码：

$('.dropdown-toggle').on('click', function(e) {
  // 导航栏未折叠（桌面端）时，允许链接跳转
  if (!$('.navbar-toggler').is(':visible')) {
    window.location.href = $(this).attr('href');
  }
});

问题2：移除下拉菜单的点击触发行为 #

已经通过CSS实现hover触发下拉，要移除点击展开的行为，同样通过JS在桌面端阻止点击触发的默认行为：

添加以下JavaScript代码：

$('.dropdown').on('click', '.dropdown-toggle', function(e) {
  // 仅在桌面端阻止点击展开下拉
  if (!$('.navbar-toggler').is(':visible')) {
    e.preventDefault();
    e.stopPropagation();
  }
});

原代码参考 #

HTML代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#"></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >HOME <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./second.html">ABOUT</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="./third.html"
              id="navbarDropdownMenuLink"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              PRODUCTS
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#ch1">A</a>
              <a class="dropdown-item" href="#ch2">B</a>
              <a class="dropdown-item" href="#ch3">C</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./fourth.html">EQUIPMENT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./fifth.html">CONTACT</a>
          </li>
        </ul>
      </div>
    </nav>

CSS代码：

.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

内容的提问来源于stack exchange，提问作者Nix Lai