如何用jQuery禁用Bootstrap下拉菜单伪元素上的链接？

I get it—your Bootstrap 4 dropdown toggle uses a FontAwesome pseudo-element for the down arrow, but clicking that icon triggers the <a> tag's href navigation instead of just opening the dropdown. Let's fix that with jQuery.

Option 1: Block Navigation Based on Click Position #

Since your pseudo-element is a fixed 50x50px absolutely positioned area, we can check where the user clicked within the toggle link and prevent navigation only if the click hits the icon area:

$(document).on('click', '.dropdown-toggle', function(e) {
    const $toggle = $(this);
    const elementOffset = $toggle.offset();
    // Calculate click position relative to the toggle link
    const relativeX = e.pageX - elementOffset.left;
    const relativeY = e.pageY - elementOffset.top;

    // Check if click is within the 50x50 pseudo-element area (adjust if your CSS changes)
    if (relativeX >= ($toggle.width() - 50) && relativeY >= 0 && relativeY <= 50) {
        e.preventDefault(); // Stop the href navigation
        $toggle.dropdown('toggle'); // Manually trigger dropdown toggle
    }
});

This works without modifying your existing HTML/CSS structure, but note that if you ever change the pseudo-element's size or position, you'll need to update the coordinate checks in the JS.

Option 2: Replace Pseudo-Element with a Real Element (More Reliable) #

If you want a more robust solution that doesn't rely on coordinate math, swap the pseudo-element for a real <span> element. This lets us directly intercept clicks on the icon without affecting the rest of the link:

Updated HTML: #

<ul id="menu-header-menu" class="nav navbar-nav">
  <li id="menu-item" class="nav-item">
    <a href="http://localhost/wordpress/" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Home
      <span class="dropdown-icon"></span> <!-- Real element for the icon -->
    </a>
  </li>
</ul>

Updated CSS: #

/* Remove the pseudo-element style */
.dropdown-toggle::after {
  display: none;
}

/* Style the real icon element to match your original pseudo-element */
.dropdown-icon {
  content: "\f107";
  font-family: fontawesome;
  position: absolute;
  height: 50px;
  width: 50px;
  /* Copy over any other positioning styles from your original ::after rule */
}

jQuery Code: #

$(document).on('click', '.dropdown-icon', function(e) {
    e.stopPropagation(); // Stop the click from bubbling up to the <a> tag
    e.preventDefault();
    // Trigger the dropdown toggle on the parent link
    $(this).closest('.dropdown-toggle').dropdown('toggle');
});

This approach is more maintainable because it doesn't depend on hardcoded pixel values—you can adjust the icon's CSS freely without breaking the click behavior.

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