Bootstrap 3：如何使下拉链接的标题在导航栏中可点击

70

我使用的是默认导航栏，其中一些列表项是下拉菜单。我无法点击触发下拉菜单的链接。我知道我可以在下拉列表中添加一个重复的链接，但我不愿意。是否可以将头部链接设为可点击的链接（而不仅仅是下拉菜单的句柄）？

作为参考，请参见下面下拉菜单中的第一个链接。我希望用户能够单击它并实际转到它指向的页面。

<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>
javascript  css  twitter-bootstrap-3 
— 爱默生
source
1
有机会获得jsfiddle.net吗？
— Toni Michel Caubet，
1
您是否也不必修改默认的下拉代码？默认行为是下拉菜单将在点击时显示。
— David Nguyen
单击下拉菜单时，为什么要同时导航到页面并向下滑动菜单？由于用户将转到新页面，因此显示下拉菜单的目的将毫无用处。我想念什么吗？
— 赢得
3
@Win我想我想在悬停时显示下拉菜单，但要使链接在单击时发生。
— emersonthis 2013年
@Emerson请参阅我的回答。
— 2013年

Answers:

89

在这里，此代码可将鼠标悬停在子菜单上，并在单击时重定向到页面。

方法：class="dropdown-toggle" data-toggle="dropdown"从标签中剥离，然后添加CSS。

这是jsfiddle的演示。对于演示，请调整jsfiddle的splitter以查看由于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="https://stackoverflow.com/page2">Page2</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">I DO WORK</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>
</body>
</html>
— 赢得
source
13
对于今天早上我一直试图解决的问题，这是一个很好的部分解决方案，非常感谢。我唯一的问题是您如何考虑访问者在触摸屏设备上的可用性？您可以添加媒体查询以使鼠标悬停在下方，例如992px，但随后您会在触摸屏上丢失子菜单。我希望听到任何进一步的想法！
— lordchancellor 2015年
2
小提琴似乎什么也没做
— 马特·威尔科
@MattWilko它使用引导程序，因此您需要调整拆分器或最大化浏览器才能看到下拉列表。
— 赢得
1
@Mkey它使用Bootstrap响应式设计。因此，如果在小的浏览器窗口中打开，则只会看到...。您必须在全屏浏览器中打开。为了更清晰起见，我将屏幕截图替换为动画GIF。
— 赢得
54

只需将类添加到disabled您的锚点上：

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

而且您有自由去。

— 德威
source
2
太好了！最好的解决方案！
— Jimmy Obonyo Abor 2015年
1
我需要的解决方法以及完善的解释。
— 奥斯汀A
5
“ .disabled”表示“重新启用BUT锚继续工作”似乎不合逻辑XD
— netalex16年
这只是没有意义，但确实有效，哈哈哈。
— giovannipds
12
刚刚意识到它根本不是移动友好的：(
— Rachel S
17

这是一个基于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');
        }
    }
});
— 加尔菲德
source
4
谢谢！非常简单易用的解决方案。我进行了一些更改，以便再次单击时仅下拉列表的头将充当链接（不是下拉列表的显示部分，如下拉列表的分隔符和非链接部分）。代替$('li.dropdown')和$(this);我使用$('li.dropdown :first-child')和$(this).parent();。这样，单击仅适用于下拉菜单的头（第一个子项），但$el变量仍引用整个下拉菜单（li元素）。
— ADTC
应该将其标记为保持Bootstrap菜单正常运行的最佳答案，并通过JavaScript增强功能使其可点击父链接。
— klewis
我使用garfyid的方法已经有好几年了，但是最近它开始崩溃了，在该方法上，单击任何下拉菜单都已重新定位到标题项URL。添加ADTC的修改为我修复了它。
— 亚历克·史密斯
这是我见过的最好的解决方案。必须作相应标记！！
— Ghopper
14

1：删除下拉触发： 

data-toggle="dropdown"

2：将此添加为您的CSS

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

为人们发布了如何偶然发现这一点

— 用户名
source
11

我知道这有点旧，但是最近我在寻找类似的解决方案时遇到了这个问题。依靠悬停事件不利于响应式设计，在移动/触摸屏上尤其糟糕。最后，我对dropdown.js文件进行了小小的编辑，使您可以单击菜单项以打开菜单，如果再次单击菜单项，它将跟随它。

这样做的好处是它完全不依赖悬停，因此在触摸屏上仍然可以很好地工作。

我已经在这里发布了它：https : //github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/dropdown-doubletap.js

希望有帮助！

— 马修·汉隆
source
到目前为止，这是最好的方法。感谢您这样做，我正要做同样的事情，您使我免于重新发明轮子！
— 乔尔·金泽尔
引导程序本身dropdown.js在两年多的时间里已经有足够的分歧，因此不再适用此版本。上面链接的版本适用于引导程序v3.3.5。看来3.3.6中的事件有所更改，但我尚未针对该版本进行测试。另外，它肯定不会在4.x中工作。
— 马修·汉隆
通常，您会使用脚本来禁用移动大小的设备上的悬停功能，因此让悬停确实不是一个坏主意，只要确保分辨率达到移动大小，就可以更改悬停。
— killstreet
很高兴您提出了跨设备行为问题。恕我直言，双击仅应在移动设备上处于活动状态，否则悬停是显示方式和单击方式，您不觉得吗？
— 奥古斯丁·里丁格
5

无需使用其他CSS / JS（已测试）

  1. data-toggle="dropdown"-对于可点击（可以同时使用移动版和网络版）
  2. data-hover="dropdown" -用于悬停（仅适用于网络，因为移动设备没有此功能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>
展开摘要

输出量

输出 在此处输入图片说明

— 阿卜杜拉·尼拉姆（Abdulla Nilam）
source
@JGEstevez您不工作是什么意思？在移动 ？或PC ??
— 阿卜杜拉·尼拉姆
1
我不认为这是要问的。据我了解，下拉菜单的标题应该可以点击并具有自己的链接。因此，在您的示例中，subnav1应该有一个插入符号，以打开下拉列表，并且在单击subnav1时，应该打开另一个链接，而不是下拉列表。
— 吉瓦尔
4

这是我的解决方案，它在标头中使用JQuery，并且可以在Mobile上使用。

在移动设备上，顶部的链接需要轻按两下：一来下拉菜单，一来转到其链接。

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

— 恩贾本
source
— 完美的
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'); }
});
— Himanshu Shakhar
source
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 :;”。送您前行。

请享用！

— 皮姆
source
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（...）

— hisa_py
source
1

另外，这里是一个简单的jQuery解决方案：

$('#menu-main > li > .dropdown-toggle').click(function () {
    window.location = $(this).attr('href');
});
— 魅力网络解决方案
source
0

我知道为时已晚，但是现在任何来这里寻求帮助的人都可以看到此帖子。有两种选择要么使用css / JavaScript，要么使用css，它将适用于可点击顶部菜单宽度大于769px的设备，完美地工作

看到这里的文章

— 西坎德
source
0

上述大多数解决方案都不适合移动设备。

我提出的解决方案将检测它是否不是触摸设备，并且navbar-toggle（汉堡菜单）不可见，并使父菜单项在悬停时显示子菜单，并且跟随其上点击链接

也使tne 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>
展开摘要

— 乔戈斯
source
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');
        }

    }

});
— 伊兰·维凡科（IlánVivanco）
source
-1

这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中的示例

— 阿尔佩什·潘查（Alpesh Panchal）
source
3
感谢您提供此代码段，它可能会提供一些有限的即时帮助。一个适当的解释，将大大提高其长期的价值通过展示为什么这是一个很好的解决了这个问题，并会使其与其他类似的问题，更有助于未来的读者。请编辑您的答案以添加一些解释，包括您所做的假设。
— iBug
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.