Bootstrap 3:如何在导航栏中使下拉链接的标题可点击
Bootstrap 3:如何在导航栏中使下拉链接的标题可点击
提问于 2013-11-13 01:08:25
我使用的是默认导航栏，有几个列表项是下拉列表。我无法点击触发下拉菜单的链接。我知道我可以在下拉列表中添加一个重复的链接，但我不想。有没有可能让head链接成为一个可点击的链接(而不仅仅是下拉列表的句柄)？
有关参考，请参阅下面下拉列表中的第一个链接。我希望用户能够点击它并实际转到它所指向的页面。
<nav class="navbar navbar-fixed-top admin-menu" role="navigation">
<div class="navbar-header">...</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
I DONT WORK! <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/page2">Page2</a></li>
</ul>
</li>
<li><a href="#">I DO WORK</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>回答 9
Stack Overflow用户
发布于 2015-09-20 15:22:24
只需在锚点上添加类disabled：
<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>你就可以走了。
Stack Overflow用户
发布于 2015-04-15 01:37:45
这是一个基于Bootstrap3.3的小技巧，使用了一点jQuery。
点击打开的下拉菜单即可执行链接。
$('li.dropdown').on('click', function() {
var $el = $(this);
if ($el.hasClass('open')) {
var $a = $el.children('a.dropdown-toggle');
if ($a.length && $a.attr('href')) {
location.href = $a.attr('href');
}
}
});Stack Overflow用户
发布于 2014-03-14 03:53:58
我知道这有点老了，但我最近在寻找类似的解决方案时遇到了这个问题。依赖鼠标悬停事件不利于响应式设计，尤其是在移动/触摸屏上。我最后对dropdown.js文件做了一个小编辑，它允许您单击菜单项来打开菜单，如果您再次单击菜单项，它将跟随它。
这样做的好处是它完全不依赖于悬停，因此它在触摸屏上仍然可以很好地工作。
我把它贴在这里：https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19935480
复制相关文章
相似问题
腾讯云开发者
