代码之家 › 专栏 › 技术社区 › wpdev

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

dropdown toggle jquery

wpdev · 技术社区 · 7 年前

在引导中 (4.0) 我使用以下代码将link 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; 
});

但问题是,我无法切换下拉列表。因为当我点击 .下拉切换::之后 它转到链接。

我想要,如果我点击 .下拉切换 转到url。但如果我点击 .下拉切换::之后 别走。只需切换下拉列表。

1 回复 | 直到 7 年前

Simon Poole 7 年前

在这种情况下,仔细检查引导程序文档,我认为最好的情况是使用文档中的输入组 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>

推荐文章

yer · 如何从按钮下拉列表中获取值并将其保存在localStorage中?角度4

6 年前

Willy_Sunny · Bootstrap4下拉菜单填充输入组

6 年前

Andriano Crs · 如何使用VBA从下拉列表中筛选列表

7 年前

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

7 年前

Jalicia Smalley · 如何为两个下拉列表创建if语句

7 年前

Hahnemann · 在Shiny中传递ui中的小部件值

7 年前

Pradnya Bhagat · 基于Ionic 3中的第一个下拉选择显示/隐藏第二个下拉选择

7 年前

user9433918 · 不应悬停的不可见元素

7 年前

evolmind · Angular 2:如何使用我的服务从json文件中填充下拉列表?

7 年前

RA19 · 单击引导下拉列表项,使用toggleClass Jquery更改按钮类

7 年前