引导程序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>
146947 次浏览
小开

这里的代码，滑动下来的子菜单悬停，让你重定向到一个网页，如果你点击它。

如何: 从标记中删除 class="dropdown-toggle" data-toggle="dropdown"，并添加 css。

这是在 Jsfiddle的演示。

enter image description here

<!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: 删除下拉触发器:

data-toggle="dropdown"

2: 添加这个你的 css

.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0px;
}

为人民张贴如何偶然发现这一点

小开

我知道这有点老旧，但我最近在寻找类似解决方案时发现了这个问题。依赖悬停事件不利于响应式设计，特别是在移动/触摸屏上。最后，我对 drodown.js 文件进行了一个小小的编辑，该文件允许您单击菜单项以打开菜单，如果您再次单击该菜单项，它将跟随它。

好的方面是它不依赖于悬停，所以它仍然可以很好地在触摸屏上工作。

我把它贴在这里: https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

希望能帮上忙！

小开

任何想要快速解决这个问题的人。将 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: ;”，然后送你沿着你的快乐的道路。

好好享受吧！

小开

这样，当下拉菜单打开时，顶层菜单中的链接就可以使用，而当关闭时，链接就会被禁用。唯一的缺点是，在移动设备中，显然需要在下拉菜单之外“点击”两次才能关闭。

$(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)

小开

我知道现在已经太晚了，但是任何来这里寻求帮助的人现在都可以看到这个帖子。有两种选择，要么使用 css/JavaScript，如果你使用 css，它将适用于设备大于769像素宽度的可点击顶部菜单，这将是完美的 f

有关文章请参阅此处

小开

下面是一个基于 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');
}
}
});
小开

只需在锚上添加类 disabled:

<a class="dropdown-toggle disabled" href="{your link}">
Dropdown</a>

你可以走了。

小开

在锚中添加 残疾人类，以下是 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'); }
});
小开

不需要使用添加 CSS/JS (测试)

  1. data-toggle="dropdown" -适用于 可点击(可以使用移动网络也可以使用 web)
  2. data-hover="dropdown" -适用于 盘旋(只适用于网络，因为手机没有 HOVER功能)

在 Mobile 上也能正常工作:)

可点击的代码示例(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>

输出

output enter image description here

小开

上述大多数解决方案对移动设备都不友好。

我提议的解决方案检测，如果它的触摸设备和 navbar-toggle(汉堡菜单)是不可见的，使父菜单项 显示悬停的子菜单和 点击它的链接

还使 tne 边距-顶部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>

小开

还有一个简单的 jQuery 解决方案:

$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
小开

下面是我的解决方案，它在头部使用 JQuery，并在 Mobile 上工作。

在移动端，顶部链接需要两个按钮: 一个下拉菜单，一个进入它的链接。

$(function(){
$('.dropdown-toggle').click(
function(){
if ($(this).next().is(':visible')) {
location.href = $(this).attr('href');;
}
});
});
});

小开

我的情况就是这样:

$('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');
}


}


});
小开

这种方法100% 奏效:

HTML:

<li class="dropdown">
<a href="https://www.bkweb.co.in/" class="dropdown-toggle" >bkWeb.co.in Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>

CSS:

@media (min-width:991px){
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
}

CODEPEN 的例子

小开

这个话题是超级老，但我需要一个解决方案，工作在桌面和移动，这些似乎都不适合我。不幸的是，这是我想出的解决方案，包括检查窗口宽度，并将其与移动菜单断点进行比较:

$( '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;
});

提交答案