我正在使用默认导航栏,其中一些列表项是下拉列表。我无法点击触发下拉列表的链接。我知道我可以在下拉列表中添加一个重复的链接,但我宁愿不这样做。是否可以使头部链接成为可点击的链接(而不仅仅是下拉的句柄)?
供参考,请参阅下面下拉列表中的第一个链接。我希望用户能够点击它并实际转到它指向的页面。
<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>
答案 0 :(得分:78)
这是在悬停时滑下子菜单的代码,如果点击它,你可以重定向到一个页面。
如何:从标记中删除class="dropdown-toggle" data-toggle="dropdown"
,然后添加css。
以下是jsfiddle的演示。 对于demo,请调整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>
答案 1 :(得分:17)
这是一个使用bit jQuery基于Bootstrap 3.3的小黑客。
点击打开的下拉菜单会执行链接。
$('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');
}
}
});
答案 2 :(得分:12)
1:删除下拉触发器:
data-toggle="dropdown"
2:添加你的css
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0px;
}
发布了人们如何偶然发现
答案 3 :(得分:11)
我知道这有点旧,但我最近在寻找类似的解决方案时遇到了这个问题。依赖悬停事件不利于响应式设计,尤其是移动/触摸屏上的糟糕。我最终对dropdown.js文件进行了一个小编辑,允许您单击菜单项以打开菜单,如果再次单击该菜单项,它将跟随它。
关于这一点的好处是它根本不依赖于悬停,所以它在触摸屏上仍能很好地工作。
我已在此处发布:https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js
希望有所帮助!
答案 4 :(得分:5)
无需使用添加CSS / JS。 (测试) 强>
data-toggle="dropdown"
- 适用于可点击(可以使用移动设备和网络)data-hover="dropdown"
- 适用于悬停(仅限网络.Cz手机没有功能HOVER
)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>
<强>输出强>
答案 5 :(得分:4)
以下是我在您的标题中使用JQuery的解决方案,适用于Mobile。
在移动设备上,顶部链接需要两次点按:一个用于下拉菜单,另一个用于转到其链接。
$(function(){
$('.dropdown-toggle').click(
function(){
if ($(this).next().is(':visible')) {
location.href = $(this).attr('href');;
}
});
});
});
&#13;
答案 6 :(得分:3)
在你的主播中添加禁用类,以下是js:
$('.navbar .dropdown-toggle').hover(function() {
$(this).addClass('disabled');
});
但这不适合移动设备,因此您需要删除移动设备的已禁用类,因此更新的js代码如下:
$('.navbar .dropdown-toggle').hover(function() {
if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
else { $(this).removeClass('disabled'); }
});
答案 7 :(得分:1)
到这里的任何人都想快速回答这个问题。用以下内容替换bootstrap.js(或dropdown.js)中的“Dropdown.prototype.toggle”函数:
Dropdown.prototype.toggle = function (e) {
var $this = $(this)
if ($this.is('.disabled, :disabled')) return
var $parent = getParent($this)
var isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
// if mobile we use a backdrop because click events don't delegate
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
var relatedTarget = { relatedTarget: this }
$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
if (e.isDefaultPrevented()) return
$parent
.toggleClass('open')
.trigger('shown.bs.dropdown', relatedTarget)
$this.focus()
}
else
{
var href = $this.attr("href").trim();
if (href != undefined && href != " javascript:;")
window.location.href = href;
}
return false
}
在第二次单击时(即:如果菜单项具有“打开”类),它将首先检查href是否未定义或设置为“javascript:;”在你快乐地送你之前。
享受!
答案 8 :(得分:1)
这会在下拉列表的顶级菜单中启用链接,并在关闭时禁用它,唯一的缺点是显然必须在下拉列表中“点击”两次以在移动设备中关闭它。
$(document).on("page:load", function(){
$('body').on('show.bs.dropdown', function (e) {
$(e.relatedTarget).addClass('disabled')
});
$('body').on('hide.bs.dropdown', function (e) {
$(e.relatedTarget).removeClass('disabled')
});
});
注意这假定是“标准”标记和Turbolinks(Rails)。您可以尝试使用$(document).ready(...)
答案 9 :(得分:1)
另外,这是一个简单的jQuery解决方案:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
答案 10 :(得分:0)
我知道为时已晚,但是现在有人来到这里寻求帮助你可以看到这篇文章。有两个选项可以使用css / JavaScript,如果你使用css,它将适用于大于769px宽度的可点击顶级菜单的设备,这将是完美的工作
文章 {p> See here答案 11 :(得分:0)
上述大多数解决方案都不适合移动设备。
我建议的解决方案是检测其是否为非触摸设备且navbar-toggle
(汉堡包菜单)不可见,并使父菜单项在悬停时显示子菜单和点击
同样使得margin-top 0因为某些浏览器中导航栏和菜单之间的差距不会让你盘旋到子项
$(function(){
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if(!is_touch_device() && $('.navbar-toggle:hidden')){
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>
$(function(){
$("#nav .dropdown").hover(
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li><a href="#">menuA</a></li>
<li><a href="#">menuB</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>
答案 12 :(得分:0)
这适用于我的情况:
$('a[data-toggle="dropdown"]').on('click', function() {
var $el = $(this);
if ( $el.is(':hover') ) {
if ( $el.length && $el.attr('href') ) {
location.href =$el.attr('href');
}
}
});
答案 13 :(得分:0)
这个话题太老了,但我需要一个适用于桌面和移动设备的解决方案,但这些似乎都不适合我。不幸的是,这是我想出的解决方案,涉及检查窗口宽度并将其与移动菜单断点进行比较:
$( 'a.dropdown-toggle' ).on( 'click', function( e ) {
var $a = $( this ),
$parent = $a.parent( 'li' ),
mobile_bp = 767, // Default breakpoint, may need to change this.
window_width = $( window ).width(),
is_mobile = window_width <= mobile_bp;
if ( is_mobile && ! $parent.hasClass( 'open' ) ) {
e.preventDefault();
return false;
}
location.href = $a.attr( 'href' );
return true;
});
答案 14 :(得分:-1)
这对我有用:
$('.navbar-collapse .dropdown-toggle').hover(function() {
if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');}
else { $(this).removeClass('disabled'); }
});
$( window ).on( "orientationchange", function( event ) {
$('.navbar-collapse .dropdown-toggle').click(function() { $(this).removeClass('disabled'); });
});