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

当单击Bootstrap 3 disabled菜单项(li)时仍将转到reference

twitter-bootstrap html

Glyn · 技术社区 · 7 年前

我使用的是bootstrap 3,我有一个菜单项被禁用;但是,当我选择它时,仍然会被带到参考:

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="E1ActivitySelect.html">Activity - E1 Administration</a></li>
    <li><a href="#">Activity - E1</a></li>
    <li class="divider"></li>
    <li class="disabled"><a href="Camp.html">Camps</a></li>
    <li><a class="dropdown-item" href="#">Hikes</a></li>
    <li><a href="#">Major Events</a></li>
    <li><a href="#">Pen Pals</a></li>
</ul>

我如何停止被带到参考(即真正的禁用)。

我的JS:

$(document).ready(function(){

    $("#includedContent").load("Menu.html");

    $(".dropdown-menu li.disabled a").click(function() {
        return false;
    });

    $('[data-toggle="tooltip"]').tooltip();

    selectPerson();

}); // end document.ready

3 回复 | 直到 7 年前

StaticBeagle 7 年前

Bootstrap 不是真的禁用了内部锚看已禁用正确的方法是定义 anchor 没有 href 因此:

<li class="disabled"><a>Camps</a></li>

如果你需要的话 href公司 在那里,你将不得不禁用点击通过 JavaScript 或 jQuery :

$(document).ready(function() {
  // For dynamically added elements
  $(document).on("click", ".dropdown-menu li.disabled a", function() {
    return false;
  });

  // For staticly loaded elemetns
  /*
  $(".dropdown-menu li.disabled a").click(function() {
    return false;
  });
  */
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="E1ActivitySelect.html">Activity - E1 Administration</a></li>
    <li><a href="#">Activity - E1</a></li>
    <li class="divider"></li>
    <li class="disabled"><a href="Camp.html">Camps</a></li>
    <li><a class="dropdown-item" href="#">Hikes</a></li>
    <li><a href="#">Major Events</a></li>
    <li><a href="#">Pen Pals</a></li>
  </ul>
</div>

如果计划动态添加元素,则可以附加 click 处理程序 document 本身。原因是 jquery公司 代码,在第一次加载页时被附加,当您在加载页后添加元素时,附加事件处理的代码已经运行,因此您要么将事件处理重新附加到新插入的元素,要么将其添加到这些新加载的元素的容器元素。 文件 几乎包含了所有人,所以这是一个安全的赌注。

cute_programmer 7 年前

要完全停止/禁用可以使用的链接 href="javascript:void(0) ,这将阻止 href 到你的定位标签

Rolanda 7 年前

您可以只使用一个css行来避免任何链接上的事件:

pointer-events: none;â

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前