Bootstrap 3:如何使导航栏中的下拉链接头部可点击
eme*_*his 67 javascript css twitter-bootstrap-3
我正在使用默认导航栏,其中一些列表项是下拉列表.我无法点击触发下拉列表的链接.我知道我可以在下拉列表中添加重复的链接,但我宁愿不这样做.是否可以使头部链接成为可点击的链接(而不仅仅是下拉的句柄)？
有关参考,请参阅下面下拉列表中的第一个链接.我希望用户能够点击它并实际转到它指向的页面.
<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>
Win*_*Win 80
这里的代码在悬停时滑下子菜单,如果你点击它,你可以重定向到一个页面.
如何:剔除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>
- 这是我今天早上一直试图解决的问题的一个很好的部分解决方案,谢谢.我唯一的问题是如何在触摸屏设备上考虑访问者的可用性？您可以添加媒体查询以使悬停在下方切出,例如992px,但随后您将丢失触摸屏上的子菜单.我很想听到有关这方面的任何进一步想法! (11认同)
- 菜单折叠时,这不起作用. (4认同)
- 小提琴似乎没有做任何事情 (2认同)
dey*_*yvw 52
只需disabled在锚点上添加该类:
<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>
你可以自由地去.
- 刚刚意识到它根本不适合移动设备:( (12认同)
- 似乎不合逻辑的是".disabled"意味着"继续工作但是锚被重新启用"XD (5认同)
- 效果很好.谢谢. (2认同)
- 好极了!最佳方案! (2认同)
- 我需要的修复与完美的工作量* (2认同)
小智 17
这是一个基于Bootstrap 3.3的小hack,使用了一个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');
}
}
});
- **谢谢!**非常简单易用的解决方案.我改变了一点,以便只有下拉头才会在再次点击时充当链接(不是下拉列表的显示部分,如下拉列表中的分隔符和非链接部分).而不是`$('li.dropdown')`和`$(this);`我使用`$('li.dropdown:first-child')`和`$(this).parent();`.有了这个,click只适用于下拉列表的头部(第一个子),但`$ el`变量仍然引用整个下拉列表(`li`元素). (4认同)
小智 12
1:删除下拉触发器:
data-toggle="dropdown"
2:添加你的css
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0px;
}
发布给人们如何偶然发现这一点
小智 11
我知道这有点旧,但我最近在寻找类似的解决方案时遇到了这个问题.依赖悬停事件不利于响应式设计,尤其是移动/触摸屏上的糟糕.我最终对dropdown.js文件进行了一个小编辑,允许您单击菜单项以打开菜单,如果再次单击该菜单项,它将跟随它.
关于这个的好处是它根本不依赖于悬停,因此它仍然可以在触摸屏上很好地工作.
我在这里发布了它:https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js
希望有所帮助!
无需使用添加CSS/JS.(测试)
data-toggle="dropdown"- 适用于Clickable(可以使用Mobile和Web)data-hover="dropdown"- 用于悬停(仅限网络.Cz手机没有功能HOVER)
在移动设备上工作正常:)
Clickable(data-toggle="dropdown")的代码示例
/*!
* this CSS code just for snippet preview purpose. Please omit when using it.
*/
#bs-example-navbar-collapse-1 ul li {
float: left;
}
#bs-example-navbar-collapse-1 ul li ul li {
float: none !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="" href="">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
subnav1
</a>
<ul class="dropdown-menu">
<li><a href="">Sub1</a></li>
<li><a href="">Sub2</a></li>
<li><a href="">Sub3</a></li>
<li><a href="">Sub4</a></li>
<li><a href="">Sub5</a></li>
<li><a href="">Sub6</a></li>
</ul>
<div class="clear"></div>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
subnav2
</a>
<ul class="dropdown-menu">
<li><a href="">Sub1</a></li>
<li><a href="">Sub2</a></li>
<li><a href="">Sub3</a></li>
<li><a href="">Sub4</a></li>
<li><a href="">Sub5</a></li>
<li><a href="">Sub6</a></li>
</ul>
<div class="clear"></div>
</li>
</ul>
</div>
<br>
<br>
<p><b>Please Note:</b> added css code not related to Bootstrap navigation. It's just for snippet preview purpose </p>产量
- 我不认为这就是被问的问题。我的理解是下拉列表的标题应该是可点击的并且有自己的链接。因此，在您的示例中，subnav1 应该有一个插入符号来打开下拉列表，当单击 subnav1 时，应该打开另一个链接，而不是下拉列表。 (2认同)