Jquery禁用引导下拉列表中伪元素上的链接

Question

在引导 (4.0) 中，我使用以下代码将链接 href 添加到下拉菜单元素：

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</a>
    </li>
</ul>

CSS：

.dropdown-toggle::after {
    content: "\f107";
    font-family: fontawesome;
    position: absolute;
    border: none;
    height: 50px;
    width: 50px;
    line-height: 53px;    
    top: 2px;
    right: 0;
    z-index: 9;
    text-align: center;
    border-left: 1px solid #bdbdbd
}

jquery：

$('.dropdown-toggle').click(function() { 
    var location = $(this).attr('href'); window.location.href = location; return false; 
});

但问题是，我无法切换下拉菜单。因为当我点击 .dropdown-toggle::after 时，它会转到链接。

我想要，如果我点击 .dropdown-toggle 转到 url。但如果我点击 .dropdown-toggle::after 就不要去了。只需切换下拉菜单。

Answer 1

在这种情况下，仔细检查 Bootstrap 文档，我认为最好的情况是使用记录在 here 中的输入组。

我在 Codepen 中得到了与您的非常相似的东西，尽管您可能想要更改填充。也不需要 ::after / FA。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />

<ul id="menu-header-menu" class="nav navbar-nav">
  <li id="menu-item" class="nav-item">
    <div class="btn-group">
      <a href="#" class="btn btn-link pr-0">Action</a>
      <button type="button" class="btn btn-link dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
  </li>
</ul>