Bootstrap 3：如何使下拉链接的头部在navbar中可点击 [英] Bootstrap 3: how to make head of dropdown link clickable in navbar
问题描述
我使用的是默认导航栏，而且几个列表项是下拉列表。我无法点击触发下拉菜单的链接。我知道，我可以只添加一个重复的链接到下拉列表，但我宁愿不。是否可以使头部链接成为可点击的链接（不只是下拉列表的句柄）？
有关参考，请参阅下面下拉列表中的第一个链接。我希望用户能够点击它，实际转到它指向的页面。
< nav class =navbar navbar-fixed-top admin-menurole =navigation>
< div class =navbar-header> ...< / div>
<！ - 收集导航链接，表单和其他内容toggling - >
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-nav navbar-right>
< li class =dropdown>
< a class =dropdown-toggledata-toggle =dropdownhref =＃>
我不工作！ < b class =caret>< / b>
< / a>
< ul class =dropdown-menu>
< li>< a href =/ page2> Page2< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>我可以工作< / a>< / li>
< / ul>
< / div><！ - /.navbar-collapse - >
< / nav>
如何：删除 class = http://jsfiddle.net/qfb6p/2/ =nofollow noreferrer> jsfiddle （ FYI： 对于演示，请调整jsfiddle的分隔符请参阅由于Bootstrap CSS 下拉菜单）。jsfiddle不会让您重定向到新页面。）
< ;！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< link rel =stylesheettype =text / csshref =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-menurole =navigation>
< div class =navbar-header> ...< / div>
<！ - 收集导航链接，表单和其他内容toggling - >
< div class =collapse navbar-collapseid =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 =＃>我可以工作< / a>
< / li>
< / ul>
< / div>
<！ - /.navbar-collapse - >
< / nav>
< / body>
< / html>
I'm using the default navbar and a couple of the list items are dropdowns. I'm not able to click the link that triggers the dropdown. I know that I could just add a duplicate link into the dropdown but I'd rather not. Is it possible to make the head link a clickable link (not just a handle for the dropdown)?
For reference, see the first link in the dropdown below. I want users to be able to click it and actually go to the page it points to.
<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>
Here this the code which slides down the sub menu on hover, and let you redirect to a page if you click on it.
How: strip out class="dropdown-toggle" data-toggle="dropdown" from a tag, and add css.
Here is the demo at jsfiddle (FYI: For demo, please adjust jsfiddle's splitter to see the dropdown due to Bootstrap CSS. jsfiddle won't let you redirect to a new page. ).
<!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>
这篇关于Bootstrap 3：如何使下拉链接的头部在navbar中可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
