引导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> 在这里，这个代码是沿着hover的子菜单滑下来的，如果你点击它，让你redirect到一个页面。
如何：从标签剥离class="dropdown-toggle" data-toggle="dropdown" ，并添加css。
这里是在jsfiddle （ FYI： 演示，请调整jsfiddle的拆分器，以查看由于Bootstrap CSS的下拉菜单， jsfiddle不会让你redirect到一个新的页面）的演示 。
<!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>
只需在你的锚上添加disabled的类：
<a class="dropdown-toggle disabled" href="{your link}"> Dropdown</a>
而且你可以自由地去。
我知道这是有点老，但我最近碰到这个，同时寻找类似的解决scheme。 依靠hover事件不利于响应式devise，特别是在移动/触摸屏上非常糟糕。 我最终做了一个小的编辑dropdown.js文件，允许你点击菜单项来打开菜单，如果你再次点击菜单项，它会跟着它。
关于这一点的好处是，它不依赖于hover，所以它仍然在触摸屏上很好地工作。
我把它贴在这里： https ： //github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js
希望有所帮助！
这是一个基于Bootstrap 3.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'); } } });
1：删除下拉触发器：
data-toggle="dropdown"
2：添加这个你的CSS
.dropdown:hover .dropdown-menu { display: block; } .dropdown-menu { margin-top: 0px; }
为人民贴上了这个绊脚石
在您的主播中添加禁用的类，以下是js：
$('.navbar .dropdown-toggle').hover(function() { $(this).addClass('disabled'); });
但是这不是移动友好的，所以你需要删除残疾人class的移动，所以更新的JS代码如下：
$('.navbar .dropdown-toggle').hover(function() { if (document.documentElement.clientWidth > 769) { $(this).addClass('disabled');} else { $(this).removeClass('disabled'); } });
无需使用添加CSS / JS。 （testing）
-
data-toggle="dropdown"– 可点击 （可以使用移动以及网页） -
data-hover="dropdown"– hover （仅网页，Cz手机没有HOVERfunction）
在移动设备上也能正常工作:)
可点击的代码示例（ 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="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>
任何到达这里谁想要快速解答这个问题。 用下面的代码replacebootstrap.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 :;” 然后再送你快乐的方式。
请享用！
这可以在打开时在下拉菜单的顶层菜单中启用该链接，并在closures时禁用该链接，唯一的缺点是显然必须在下拉菜单之外“点按”两次，才能在移动设备上closures它。
$(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（…）
这是我的解决scheme，它使用JQuery在您的头，并在移动工作。
在移动顶端的链接需要两个水龙头：一个下拉菜单，一个去链接。
$('.dropdown-toggle').click(function(){ if ($(this).next().is(':visible')) { location.href = $(this).attr('href');; } }); });
我知道它为时已晚，但任何人来到这里求助，现在你可以看到这个post。有两个select使用css / JavaScript，如果你使用css，它将适用于宽度为769px的可点击顶部菜单的设备，完美地工作
看到这里的文章
以上大部分解决scheme都不适合移动设备。
我build议的解决scheme检测，如果它不触摸设备，并navbar-toggle （汉堡菜单）不可见，并使父菜单项hover子菜单上 ，并按照其点击链接
也使margin-top 0，因为在某些浏览器的导航栏和菜单之间的差距不会让你hover到子项目
$(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>
另外这里是一个简单的jQuery解决scheme：
$('#menu-main > li > .dropdown-toggle').click(function () { window.location = $(this).attr('href'); });
