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>回答 16
Stack Overflow用户
发布于 2013-11-13 04:03:54
这里的代码在悬停时滑下子菜单，如果你点击它，让你重定向到一个页面。
方法：从标签中剥离class="dropdown-toggle" data-toggle="dropdown"，并添加css。
这是jsfiddle上的演示。对于演示，请调整jsfiddle的拆分器以查看由于Bootstrap CSS而产生的下拉列表。jsfiddle不会让你重定向到一个新的页面。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<style type='text/css'>
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
</style>
</head>
<body>
<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 href="http://stackoverflow.com/">Stack Overflow <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>
</body>
</html>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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19935480
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号